想要監聽網頁里面iframe標簽內容變化，需要通過監聽網頁dom元素變化，然后通過查詢得到iframe標簽，再通過iframe.contentWindow.document得到ifram內的document，然后再使用選擇器得到body元素，有了body元素，就可以通過innerHTML得到ifram里面的內容了。

監聽網頁dom元素發生變化函數：使用了MutationObserver

  // 創建 MutationObserver 對象并傳入回調函數const observer = new MutationObserver((mutationsList) => {// mutationsList 包含了所有發生的 DOM 改動信息for (let mutation of mutationsList) {if (mutation.type === 'attributes') {console.log(`iframe里面屬性變化 ${mutation}`)} else if (mutation.type === 'childList') {console.log('iframe里面節點發生變化')}}})// 配置觀察選項const config = { attributes: true, childList: true }// 開始觀察目標節點及其后代節點的變化observer.observe(ele, config)

然后就是獲取iframe變化的函數：

const listenCsdnContent = (url: String) => {if (url.includes('csdn') && url.includes('editor')) {const textInput = document.querySelector('.cke_wysiwyg_frame')const iframeDom = textInput.contentWindow.documentconst iframeBody = iframeDom.querySelector('body')console.log('iframe元素', iframeBody.innerHTML)}
}

最后將這個函數添加到dom變化的回調里面：

const observer = new MutationObserver((mutationsList) => {// mutationsList 包含了所有發生的 DOM 改動信息listenCsdnContent(curUrl)for (let mutation of mutationsList) {if (mutation.type === 'attributes') {console.log(`iframe里面屬性變化 ${mutation}`)} else if (mutation.type === 'childList') {console.log('iframe里面節點發生變化')}}})