从锚标记中的属性 href 加载特定 div 中的 html 文件

Question

HTML 文件中的 Div

<div class="content">
  <p class="info">Please choose a category</p>
</div>

带有 href 属性的锚标记

<a class="menu__link" href="{% url 'Profile' %}">Profile</a>

我的 javascript 函数

 var gridWrapper = document.querySelector('.content');

            function loadDummyData(ev, itemName) {
                ev.preventDefault();

                closeMenu();

                gridWrapper.innerHTML = '';
                classie.add(gridWrapper, 'content--loading');
                setTimeout(function() {
                    classie.remove(gridWrapper, 'content--loading');
                    gridWrapper.innerHTML = $(".menu__link--current").attr("href")
                    console.log($(".menu__link--current").attr("href"))
                }, 500);
            }

控制台的输出显示的是 url 的路径

/Accounts/profile

如果ev.preventDefault(); 被删除，并注释gridWrapper.innerHTML = $(".menu__link--current").attr("href") 行，html 页面将被加载但不在特定的内容 div 中。

问题是我想在内容 div 中加载带有 href 属性的特定 html 页面。 任何帮助都感激不尽。 谢谢。

Answer 1

您无法使用 InnerHTML 加载外部 html。 InnerHTMl 用于将 HTML 元素插入到文档或目标 div 中。要加载外部 Html 文件，您必须使用 .load

var gridWrapper = document.querySelector('.content');
function loadDummyData(ev, itemName) {
    ev.preventDefault();

    closeMenu();

    gridWrapper.innerHTML = '';
    classie.add(gridWrapper, 'content--loading');
    setTimeout(function() {
      classie.remove(gridWrapper, 'content--loading'); 

      let path = $(".menu__link").attr("href") //Fetch path to the file
      console.log($(".menu__link").attr("href")) //Path has to be /file/filename.html
      $('.content').load(path); //========> use the path in the load method inside content div.
    }, 500);
}