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请求，并等待返回的文件加载。

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

获取文件后

一旦有了这个字符串化的文件，就可以在请求结果（parseHTML()）上使用jQuery的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。

Answer 2

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

＆＃13;

$.get( "/FileB.html", function( data ) {

  var source = $(data).find("#sampleDiv").html();
  var search = source.search("text");

});

＆＃13;

此处替换＆＃34; FileB.html＆＃34;使用文件B的URL。

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

2 个答案:

获取文件

获取文件后