如何訪問外部HTML文件的內部HTML？

Question

是否可以使用javascript或jQuery訪問外部HTML文件的innerHTML？ 例如，假設我在瀏覽器中打開了HTML File A，並在其中寫入了相關的javascript函數。 當我點擊HTML文件A上的按鈕時，我希望我的JavaScript函數搜索位於HTML文件B中與HTML文件A相同的文件夾中的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 File B的內容很長，因此我想通過將兩者分開來保持HTML File A中的代碼干凈。

Answer 1

獲取文件

在沒有請求文件的情況下，無法從客戶端對外部文件執行遠程操作。 在這種情況下，最簡單的操作是觸發對文件的AJAX或XHR請求，並等待加載返回的文件。

出於所有目的和目的，以這種方式發送的文件都可以視為字符串。

獲取文件后

獲得此字符串化文件后，就可以根據請求的結果使用jQuery的parseHTML()方法就足夠了（ 也可以使用Javascript代替 ）。 這將返回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請求的工作。 嘗試這個：

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

在這里用文件B的網址替換“ FileB.html”。