如何访问外部 HTML 文件的内部 HTML？答案

【问题标题】：How to access inner HTML of an external HTML file?如何访问外部 HTML 文件的内部 HTML？
【发布时间】：2016-07-20 13:29:28
【问题描述】：

有没有办法使用 javascript 或 jQuery 访问外部 HTML 文件的 innerHTML？例如，假设我在浏览器中打开了 HTML 文件 A，并在其中写入了相关的 javascript 函数。当我点击 HTML 文件 A 上的按钮时，我希望我的 javascript 函数搜索位于与 HTML 文件 A 相同的文件夹中的 HTML 文件 B 中的 innerHTML。

代码如下所示：

HTML 文件 A：

<script>
    var source = $("#sampleDiv").html();
    var search = source.search("text");
</script>

HTML 文件 B：

<div id="sampleDiv">Here's some text.</div>

我试图将它们保存在单独的文件中，以保持我的代码干净。我在 rl 中使用的 HTML 文件 B 的内容很长，所以我想通过将两者分开来保持 HTML 文件 A 中的代码干净。

【问题讨论】：

你在哪里加载html B文件？在 iframe 中？

标签： javascript jquery

【解决方案1】：

获取文件

如果不请求文件，就无法从客户端对外部文件执行远程操作。在这种情况下，最简单的做法是触发文件的 AJAX 或 XHR 请求，然后等待返回的文件加载。

以这种方式发送的文件可以被视为所有意图和目的的字符串。

获取文件后

一旦你有了这个字符串化的文件，在你的请求结果上使用jQuery的parseHTML()方法就足够了(you can also use Javascript instead)。这会返回一个 DOM 元素数组：

var str = "hello, <b>my name is</b> jQuery.";
var html = $.parseHTML(str); // outputs ['hello,', '<b>my name is</b>',' 'jQuery'];
html.map((element) => element.innerText)
    .filter((text) => text != undefined) // outputs ['my name is']

然后您可以遍历数组以找到您要查找的元素及其innerText。

【讨论】：

我认为这会起作用，但是当我尝试进行 AJAX 调用时出现错误。我在本地驱动器上完成所有这些工作，没有通过互联网，至少现在还没有。是否可以对本地文件进行 AJAX 调用？这是我得到的错误： XMLHttpRequest cannot load file:///I:/tests/test.html。跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https、chrome-extension-resource。
这是因为 Google Chrome 的安全性不允许您调用不是通过 HTTP 提供的本地文件，以防止跨站点脚本。这不是您的 Javascript 的问题。这可以通过安装本地服务器来解决。在包含您的 HTML 文件的目录中运行 python -m SimpleHTTPServer() 并导航到它所服务的端口。
Here 是一个关于如何正确使用 SimpleHTTPServer 的教程。

【解决方案2】：

这是一个 Ajax 请求的工作。试试这个：

$.get( "/FileB.html", function( data ) {

  var source = $(data).find("#sampleDiv").html();
  var search = source.search("text");

});

这里将“FileB.html”替换为文件 B 的 url。

【讨论】：