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

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

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

首先，在HBuilderX中新建一個(gè)Web項(xiàng)目，并在文件中引入jQuery的核心文件。

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

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

在項(xiàng)目的同級(jí)目錄下，新建一個(gè)名為的靜態(tài)頁面文件。在文件的主體元素中插入一個(gè)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)簽中插入一個(gè)按鈕和一個(gè)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ù)中，添加按鈕點(diǎn)擊事件，用于獲取嵌入在iframe中子頁面table中的內(nèi)容。

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

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