在開發(fā)網(wǎng)頁過程中，我們通常會涉及到同一個頁面內(nèi)傳遞參數(shù)和數(shù)據(jù)的情況，但有時也會遇到需要跨頁面獲取內(nèi)容的場景。本文將介紹如何使用jQuery方法來實現(xiàn)跨頁面獲取內(nèi)容。 創(chuàng)建項目和引入jQuery核心文

在開發(fā)網(wǎng)頁過程中，我們通常會涉及到同一個頁面內(nèi)傳遞參數(shù)和數(shù)據(jù)的情況，但有時也會遇到需要跨頁面獲取內(nèi)容的場景。本文將介紹如何使用jQuery方法來實現(xiàn)跨頁面獲取內(nèi)容。

創(chuàng)建項目和引入jQuery核心文件

首先，在HBuilderX中新建一個Web項目，并在文件中引入jQuery的核心文件。

lt;script src"jquery.js"gt;lt;/scriptgt;

創(chuàng)建子頁面并設(shè)置表格樣式

在項目的同級目錄下，新建一個名為的靜態(tài)頁面文件。在文件的主體元素中插入一個table標(biāo)簽，并設(shè)置表格的樣式。

lt;table style"border-collapse: collapse;"gt;
  lt;trgt;
    lt;thgt;姓名lt;/thgt;
    lt;thgt;年齡lt;/thgt;
  lt;/trgt;
  lt;trgt;
    lt;tdgt;小明lt;/tdgt;
    lt;tdgt;18lt;/tdgt;
  lt;/trgt;
lt;/tablegt;

在主頁面添加按鈕和iframe元素

回到文件，在body標(biāo)簽中插入一個按鈕和一個iframe元素。為iframe元素設(shè)置id屬性和src屬性，其中src屬性的值為。

lt;button id"getDataBtn"gt;獲取數(shù)據(jù)lt;/buttongt;
lt;iframe id"myFrame" src""gt;lt;/iframegt;

使用jQuery獲取跨頁面內(nèi)容

在jQuery的初始化函數(shù)中，添加按鈕點擊事件，用于獲取嵌入在iframe中子頁面table中的內(nèi)容。

$(document).ready(function() {
  $("#getDataBtn").click(function() {
    var childContent  $("#myFrame").contents().find("table").html();
    console.log(childContent);
  });
});

保存代碼并運行文件。打開瀏覽器，查看頁面效果。點擊按鈕后，打開瀏覽器控制臺，查看打印的結(jié)果。