頁面嵌入同域 ``，需動態修改其內部元素樣式（如隱藏所有圖片），但無法修改 iframe 源碼（由其他程序生成）。</p> <h2>核心原理：同源策略允許跨文檔 DOM 訪問</h2> <p>當主頁與 iframe 頁面<strong>協議、域名、端口完全一致</strong>時，可通過 `iframe.contentWindow.document` 或 `iframe.contentDocument` 直接操作內部 DOM。</p> <h2>完整代碼示例（兼容 IE6+ / 現代瀏覽器）</h2> <pre><code><iframe id="targetFrame" src="inner.html" onload="hideImages(this)"></iframe> <script> function hideImages(iframe) { try { // 獲取 iframe 內部 document var doc = iframe.contentDocument || iframe.contentWindow.document; if (!doc) return; // 跨域或未加載完成會拋異常/返回 null var imgs = doc.getElementsByTagName('img'); for (var i = 0; i < imgs.length; i++) { imgs[i].style.display = 'none'; // 或 imgs[i].hidden = true (HTML5) } } catch (e) { console.error('iframe 操作失敗，可能跨域或文檔未就緒：', e); } } </script> </code></pre> <h2>進階：通用樣式注入函數</h2> <pre><code>function injectStyle(iframe, cssText) { var doc = iframe.contentDocument || iframe.contentWindow.document; if (!doc) return; var style = doc.createElement('style'); style.type = 'text/css'; style.appendChild(doc.createTextNode(cssText)); (doc.head || doc.documentElement).appendChild(style); } // 使用示例：隱藏圖片 + 修改背景色 injectStyle(document.getElementById('targetFrame'), 'img { display: none !important; } body { background: #f5f5f5; }'); </code></pre> <h2>常見坑與解決</h2> <table border="1" cellpadding="5" cellspacing="0"> <tr><th>問題</th><th>原因</th><th>解決</th></tr> <tr><td>報錯「Permission denied / Blocked a frame」</td><td>跨域（域名/端口/協議不一致）</td><td>確保同域；或在雙方頁面設置 <code>document.domain = 'base.com'</code>（僅限同主域）；或用 postMessage 通信</td></tr> <tr><td>contentDocument 為 null</td><td>iframe 尚未加載完成</td><td>綁定 <code>onload</code> 事件後再操作</td></tr> <tr><td>本地文件無法操作</td><td>Chrome/Edge 禁止 file:// 協議跨文檔訪問</td><td>啟動本地 HTTP 服務（如 `python -m http.server` / `npx serve`）</td></tr> <tr><td>動態添加的元素未生效</td><td>iframe 內部 JS 後渲染</td><td>在 iframe 內部監聽 <code>DOMContentLoaded</code> 或使用 <code>MutationObserver</code> 持續注入</td></tr> </table> <h2>最佳實踐建議</h2> <ul> <li>優先在 iframe 源頁面通過 CSS/JS 實現樣式控制，減少外部耦合。</li> <li>若必須外部控制，封裝 <code>iframeReady(iframe, callback)</code> 工具函數，統一處理加載時序與異常。</li> <li>大量樣式修改時，注入 `<style>` 標籤比逐元素設置 `style.xxx` 性能更好。</li> </ul> <div class="qcxs_ie_he"></div> </div> <div class="akevx_own"> <script language='javascript' src='/ad/p.js'></script></div> <div class="akevx_mj"> </div> <div class="qcxs_ie_he"></div> <ol class="qmsbvx_hsb ovv_hex"> <li>上一篇文章： <a class='LinkPrevArticle' href='https://code.yunyiwangluo.com/bianchen/bczhwd/31205.html' >能否使用 JavaScript 或 Java 生成 CorelDRAW 文件？專業解答</a> <li>下一篇文章： <a class='LinkNextArticle' href='https://code.yunyiwangluo.com/bianchen/bczhwd/31207.html' >Java ArrayList 遍歷刪除陷阱：為什麼刪除了錯誤元素？正確姿勢詳解</a> </ol> </div> </div> <div class="qirnxbd bg1 mt20"> <div class="jdbsbav"> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/' target="_blank">程式設計綜合問答</a> <div class="jdbsbav_hx"></div> </div> <div class="qirnxbd_rbx"> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/36989.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010615020283.jpg' width='100' height='70' alt='Android 異步查詢多個 URL 存入數組崩潰：用 List 替代定長數組' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/36989.html' target="_blank"><strong>Android 異步查詢多個 URL 存入數組崩潰：用 List 替代定長數組</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/36989.html' target="_blank"><p>崩潰代碼 String Image_url[] = null</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/30579.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010610534501.png' width='100' height='70' alt='C++ 控制台表格輸出對齊：printf 格式化寬度與對齊控制' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/30579.html' target="_blank"><strong>C++ 控制台表格輸出對齊：printf 格式化寬度與對齊控制</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/30579.html' target="_blank"><p>用 printf 格式化字符串實現固定列寬對齊： print</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/30287.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010610431553_S.jpg' width='100' height='70' alt='MySQL 系統庫 mysql：存儲用戶權限、時區、存儲過程的核心元數據倉庫' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/30287.html' target="_blank"><strong>MySQL 系統庫 mysql：存儲用戶權限、時區、存儲過程的核心元數據倉庫</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/30287.html' target="_blank"><p>安裝 MySQL 後默認存在名為 mysql 的庫，**不可</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/33826.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010612525808_S.jpg' width='100' height='70' alt='Java 打包后资源文件读取失败：Class.getResourceAsStream 替代 FileInputStream' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/33826.html' target="_blank"><strong>Java 打包后资源文件读取失败：Class.getResourceAsStream 替代 FileInputStream</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/33826.html' target="_blank"><p>问题现场 // 开发环境正常，打包 JAR 后失效 File</p></a> </div> <div class="qcxs_ie_he"></div> </div> </div> </div> <div class="eccsgxsg mt20"> <div class="akevx_oin"> </div> <div class="nenxnxb bg1 mt20"> <div class="enxvsfgg"> <div class="enxvsfgg_1"></div> </div> <div class="pdirbvx lbhevs ovv_hex"> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/35291.html' target="_blank">JDBC 程式碼中缺少 catch 與 finally 區塊的補全寫法</a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/43789.html' target="_blank">Visual Studio C# 找不到 TabPage Text 屬性？</a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/35419.html' target="_blank">Android ksoap2 複雜字串解析為 List<Map> 供 SimpleAdapter 顯示</a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/37022.html' target="_blank">JS 中 body 標籤傳 this 實為 window 對象：正確獲取 body 方式</a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/46519.html' target="_blank">Objective-C 類擴展中聲明私有方法的最佳時機：封裝原則與 viewDidLoad 公開原因解析</a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/30158.html' target="_blank">Java Web 自動壓縮 JS/CSS：GzipFilter 或建構時壓縮</a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/44764.html' target="_blank">PHP連接MongoDB集群數據不穩定？深度解析MongoClient配置陷阱</a> </div> </div> <div class="eqibneb bg1 mt20"> <div class="lkebxsg">欄目導航</div> <div class="eqibneb_1 ovv_hex"> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/huibian/' target="_self">組合語言</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/delphi/' target="_self">Delphi</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/groovy/' target="_self">Groovy</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/webSphere/' target="_self">WebSphere</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/rational/' target="_self">Rational</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/python/' target="_self">Python 程式設計</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/ruby/' target="_self">Ruby 程式設計</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/bcdq/' target="_self">程式設計疑難解答</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/bczhwd/' target="_self">程式設計綜合問答</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/gdgybc/' target="_self">更多程式設計知識</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/bcwtjd/' target="_self">程式設計問題解答</a></li> </div> </div> </div> <div class="qcxs_ie_he"></div> </div> </div> <div class="qcxs_ie_he"></div> <div class="ebrxbsbf">Copyright © <a href="https://code.yunyiwangluo.com/" target="_blank" title="程式碼之家">程式碼之家</a> All Rights Reserved </div> </body> </html>
