在 html 中包含 html 而 jquery 加载不起作用答案

【问题标题】：Including html in html with jquery load not working在 html 中包含 html 而 jquery 加载不起作用
【发布时间】：2020-05-23 19:50:22
【问题描述】：

我是网络开发新手，所以我觉得我错过了一些简单的东西。我真的只需要有人指出我错过了什么？

我正在尝试使用 jquery load() 函数将本地 html 文件包含到另一个 html 文件中。我听从了其他stackoverflow posts 的一些建议。看起来它应该非常简单并且工作正常，但它不起作用。我确实将 jquery 源添加到头部，并确保我在正文中插入的部分包含正确的 div id。我不需要插入本地 html 的特定部分，只需插入整个内容即可。该 html 只是文本，仅包含 <p> 标签和类似的东西。

代码如下：

<html>
<head>
    <meta charset="utf-8" />
    <title>letters on the road</title>
    <link rel="stylesheet" type="text/css" 
    href="../assets/css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script> 
    $(function(){
        $("#includedContent").load("text-012518.html"); 
    });
    </script> 
</head>
<body style="font-family:Andale Mono Regular">
    <div id="includedContent"></div>
    <a href="../index_v2.html">home</a>
</body>
</html>

我觉得 jquery 加载似乎是最干净的选择。我确实尝试过使用对象标签，但它会将文本放在窗口角落的一个可滚动的小框中。我对 css 不够熟悉来修复它，所以仍然希望 jquery 加载能够正常工作。

我上面的代码没有抛出错误，它根本不包含来自外部 html 的任何内容。（外部 html 中的文本确实与对象一起显示，所以我认为外部 html 本身没有问题。）我还尝试了没有 $(function(){}); 包装器的代码，它也不起作用。

what shows up on the page

【问题讨论】：

正确给出html文件的完整路径，例如.load('/index2.html')
能否添加相关文件的文件层次结构...
你能检查开发者控制台吗？您是否遇到了 CORS 异常？
尝试给the load call添加回调函数，看看是否成功。
哦，是的！谢谢，@Mukesh Keshu 控制台中有一个 CORS 异常。唔。我明白了。

标签： javascript html jquery

【解决方案1】：

大多数堆栈溢出解决方案（Answer 1、Answer 2 等等）都不起作用。由于 CORS 问题，使用 Jquery .load() 或 XMLHttpRequest 实现的解决方案失败（至少在 chrome 上）。解决方法是通过添加--disable-web-security 标志或使用CORS chrome extension 来禁用安全性，这两者都只适用于测试而不适用于生产应用程序。

Access to XMLHttpRequest at 'file:///.../text.html' from origin 'null' has been blocked by CORS policy: 
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

这两种方法都有效 -

使用<object>标签 -

<object data="test.html"></object>

使用iframe标签 -

<iframe src = "test.html" height="80px" width="500px" >

我的方法是使用 Jquery/vanila javascript 使用 object 标签加载 html。将script 标签添加到页面底部。寻找更多答案。

<script>
document.getElementById("includedContent").innerHTML='<object data="text.html"></object>';
</script>

【讨论】：

我提供了对象和 iframe 文档以及粗略的扫描，我将使用 iframe 进行尝试。我会让你们知道情况如何。谢谢！大多数情况下，bc 似乎建议使用 object 来插入插件？但我也会试试你的建议。
我确实得到了一些使用 iframe 的工作代码（我即将发布一个关于样式的单独问题）。您能否详细说明为什么要使用 object 代替？不太熟悉每个的差异和好处。不过，我确实看到大多数 iframe 示例都倾向于视频和日历。
两者各有优缺点。一方面 - iframe 难以调试，并且 javascript 难以操纵内容。看到这个 - stackoverflow.com/questions/23178505/…
虽然 object 和 iframe 在我的情况下不起作用，但它是一个固定的 sidenav + 样式，并且可以离线工作（我用它来编写程序的帮助文件） - 所以一切看起来都错了，至少这个指出我正确的方向，所以谢谢！顺便说一句，Firefox 也有同样的问题