时间戳

首页 > 解决方案 > 从锚标记中的属性 href 加载特定 div 中的 html 文件

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

问题描述

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 页面。任何帮助都感激不尽。谢谢你。

标签： javascriptjqueryhtmldjango

解决方案

您无法使用InnerHTML. 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);
}

推荐阅读