通过 JavaScript 或 jquery 在 HTML 中动态包含文件

Question

我尝试了以下代码。 但它不能正常工作。 只有一个文件重复添加/包含。 我该如何解决这个问题？ **我想创建一个自定义标签“”，它可以包含 html 文件！！！！ ——

 var createIncludeTag = document.createElement('include'); $(function(){ var includeFile = $('include').attr('href'); $("include").load(includeFile); });

 <include href="nav.html"></include> <include href="main.html"></include> <include href="footer.html"></include>

Answer 1

<include>不是有效的html元素。

您可以使用rel属性设置为"import" <link>元素将资源加载到document 。 在<link>元素的load事件中，您可以使用link.import获取资源的内容

<link rel="import" href="nav.html" type="text/html">

   $(function() {
     $("body").append($("link[href='nav.html']")[0].import.body.innerHTML)
   })

   $("link[href='nav.html']").on("load", function() {
     $("body").append(this.import.body.innerHTML)
   })

或者，您可以使用.load()

   $("#element").load("nav.html");

Answer 2

根据.attr() 函数的 jquery API 参考

描述：获取匹配元素集中第一个元素的属性值。

这就是为什么您只为所有三个元素加载第一个包含 html。

您必须改用.each()函数。

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            $("include").each(function (index, value) {
                $(this).load($(this).attr("href"));
            });
        });
    </script>
</head>

<body>
    <include href="nav.html"></include>
    <include href="main.html"></include>
    <include href="footer.html"></include>
</body>

</html>

顺便说一句，创建自定义 <include> 标签可能不是一个好主意。

通过 JavaScript 或 jquery 在 HTML 中动态包含文件

问题描述

2 个解决方案

解决方案1
1 2017-03-03 18:54:46

解决方案2
0 2021-11-18 01:35:15

通过 JavaScript 或 jquery 在 HTML 中动态包含文件

问题描述

2 个解决方案

解决方案1 1 2017-03-03 18:54:46

解决方案2 0 2021-11-18 01:35:15

解决方案1
1 2017-03-03 18:54:46

解决方案2
0 2021-11-18 01:35:15