首頁  >  文章  >  web前端  >  如何使用 CSS 設定 iFrame 內容的樣式?

如何使用 CSS 設定 iFrame 內容的樣式?

Barbara Streisand
Barbara Streisand原創
2024-10-25 09:08:02964瀏覽

How Can I Style an iFrame's Content with CSS?

使用 CSS 設定 iFrame 樣式

為了增強 iFrame 的外觀,通常需要對其內容套用自訂 CSS。然而,由於 iFrame 引用來自不同來源的內容,跨域限制可能會阻礙直接 CSS 應用。

對於透過本機檔案(例如file://)載入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>

使用jQuery:

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

請記住,這種方法可能會產生安全隱患,因此在實施之前了解潛在風險至關重要。有關處理這些風險的更多信息,請參閱在 Safari 中停用同源策略的指南。

以上是如何使用 CSS 設定 iFrame 內容的樣式?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn