Home  >  Article  >  Web Front-end  >  How to Add CSS to iFrames from a Different Domain?

How to Add CSS to iFrames from a Different Domain?

Patricia Arquette
Patricia ArquetteOriginal
2024-10-25 05:38:02128browse

How to Add CSS to iFrames from a Different Domain?

Adding CSS to iFrames

In cases where iframes are loaded from a different domain, applying CSS directly can be a challenge. The following solution addresses this issue.

Modifying Style Sheets

Based on solutions, here are methods to add CSS:

Using JavaScript:

<code class="js">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>

Using jQuery:

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

Potential Security Concerns

Note that security concerns may arise when disabling the same-origin policy in Safari. Appropriate measures should be taken to ensure secure implementation.

The above is the detailed content of How to Add CSS to iFrames from a Different Domain?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn