一、iframe下的#document是什么

• #document 是一個(gè)特殊的 HTML 元素，表示 <iframe> 元素內(nèi)部的文檔對(duì)象。
• 當(dāng)你在 HTML 頁面中嵌入一個(gè) <iframe> 元素時(shí)，瀏覽器會(huì)創(chuàng)建一個(gè)新的文檔對(duì)象來表示 <iframe> 內(nèi)部的內(nèi)容。這 個(gè)文檔對(duì)象就是 #document。

二、如何獲取#document下的內(nèi)容

1. 使用 contentDocument 屬性

var iframe = document.getElementById('myIframe');
var iframeDocument = iframe.contentDocument;
// 現(xiàn)在可以訪問 iframe 文檔中的元素了
var heading = iframeDocument.getElementsByTagName('h1')[0];
console.log(heading.textContent);

2. 使用 contentWindow.document

var iframe = document.getElementById('myIframe');
var iframeDocument = iframe.contentWindow.document;
// 訪問 iframe 文檔中的元素
var heading = iframeDocument.getElementsByTagName('h1')[0];
console.log(heading.textContent);

注意：如果 iframe 加載的頁面與父頁面不同源（即協(xié)議、域名或端口任一不同），則出于安全考慮，瀏覽器的同源政策會(huì)阻止你訪問 iframe 的內(nèi)容。這種情況下，contentDocument會(huì)返回null。

三、如何獲取跨域iframe的#document里的內(nèi)容

• 網(wǎng)絡(luò)上有其他解決方案，這里我提供一個(gè)修改chromium源碼的方案。
• 這里假設(shè)你已經(jīng)可以熟練編譯chromium源碼。

1.找到源碼：

• 打開：\third_party\blink\renderer\core\html\html_iframe_element.idl

[CheckSecurity=ReturnValue] readonly attribute Document? contentDocument;

2.替換為：

//[CheckSecurity=ReturnValue] readonly attribute Document? contentDocument;
readonly attribute Document? contentDocument;

注意，這里就是把[CheckSecurity=ReturnValue]這段注釋掉了，意思是忽略掉安全隔離。

3.編譯：

ninja -C out/Default chrome

4.啟動(dòng)時(shí)加上參數(shù)（必須）

--disable-site-isolation-trials

操作完后，就可以發(fā)現(xiàn)，跨域iframe的#document里的內(nèi)容也可以獲取到啦。

四、風(fēng)險(xiǎn)

• 1.取消跨域隔離有一定安全風(fēng)險(xiǎn)。
• 2.有些站會(huì)做安全隔離檢測，可能會(huì)被識(shí)別到。

如果有更好方案，請留言哈。