javascript - 如何访问外部 HTML 文件的内部 HTML？

Question

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

代码如下所示:

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 中的代码干净。

Answer 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。