如何將 CSS 樣式套用到不同網域的 iFrame？

使用CSS 跨域自訂iFrame

使用從不同網域載入的iFrame 時，可以將CSS 樣式應用到嵌入頁面由於瀏覽器的跨域策略所帶來的挑戰。但是，這裡有兩個解決方案可以讓您將 CSS 無縫添加到 iFrame：

1。直接元素操作：

如果您有權存取 iFrame 的 DOM，則可以使用 JavaScript 直接將樣式標記附加到 iframe 文件的頭部。

<code class="javascript">var cssLink = document.createElement("link");
cssLink.href = "file://path/to/style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
frames['iframe'].document.body.appendChild(cssLink);</code>

2. jQuery 方法：

對jQuery 更友善的方法是使用以下程式碼將樣式連結附加到iFrame 的頭部：

<code class="javascript">var $head = $("iframe").contents().find("head");
$head.append($("<link/>", { rel: "stylesheet", href: "file://path/to/style.css", type: "text/css" }));</code>

安全注意事項：

需要注意的是，這些解決方案涉及繞過跨域策略，這可能會引起安全問題。為了緩解這種情況，請確保 iFrame 內容來自受信任的來源，且 CSS 檔案不包含惡意程式碼。如有必要，請依照「在 Safari 中停用同儕策略」中概述的步驟在 Safari 中停用同儕策略以進行測試。

以上是如何將 CSS 樣式套用到不同網域的 iFrame？的詳細內容。更多資訊請關注PHP中文網其他相關文章！