一、iframe下的#document是什么

• #document 是一個特殊的 HTML 元素，表示 <iframe> 元素內(nèi)部的文檔對象。
• 當(dāng)你在 HTML 頁面中嵌入一個 <iframe> 元素時，瀏覽器會創(chuàng)建一個新的文檔對象來表示 <iframe> 內(nèi)部的內(nèi)容。這 個文檔對象就是 #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é)議、域名或端口任一不同），則出于安全考慮，瀏覽器的同源政策會阻止你訪問 iframe 的內(nèi)容。這種情況下，contentDocument會返回null。

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

• 網(wǎng)絡(luò)上有其他解決方案，這里我提供一個修改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.啟動時加上參數(shù)（必須）

--disable-site-isolation-trials

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

四、風(fēng)險

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

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