我可以将 CSS 应用于 iframe 中的元素吗？

Posted 2023-02-21

【中文标题】我可以将 CSS 应用于 iframe 中的元素吗？

【英文标题】：Can I apply CSS to the elements within an iframe?

【发布时间】：2011-03-18 04:51:56

【问题描述】：

我经常看到网站使用包含外部网站的 iframe，以及包含供用户使用的 JavaScript 功能的顶部框架。

例如用户分析软件、Digg 栏等...

---

对于类似的东西进行实验有什么技巧吗？ =) 知道会很棒

【参考方案1】：

不，不是来自 iframe 外部。 <iframe> 是它自己的世界。如果域等匹配，则 javascript 可以进出通信，并且可以（如果愿意）将 CSS 注入子框架。

如果<iframe> 包含来自不同域的内容，那么您几乎无能为力。父页面控制框架的大小和是否可见，并且可以通过定位等方式将自己的内容over放在框架上，但不能直接影响实际框架内容的呈现方式。

【讨论】：

非常感谢！如果域与主机页面完全相同怎么办？

如果您在同一个域中，则父页面中的 Javascript 可能会混淆框架的内容。父页面 CSS 不会影响框架页面，但 Javascript 可以更改 CSS 或更改元素样式等。

是否有使用人们所说的一些技术来做到这一点.. 嵌入一个子 iframe 或 postMessage 或其他东西？ pipwerks.com/2008/11/30/…johan.driessen.se/posts/resizing-cross-domain-iframes

【参考方案2】：

如果它是同一个域，您可以使用 javascript 干扰 iframe 内容，如下所示。 假设 iframe 的 id 是IframeId。并且您想更改 id 为“elementId”的元素的颜色。

$("iframe").load(function() 
   var frameContents;
   frameContents = $("#IframeId").contents(); 
   frameContents.find("#elementId").css("color","#fff");
);

【参考方案3】：

这可以通过将 CSS 链接注入 iframe 的 Header 来实现：

    // this function will inject the link to CSS into iframe header
    function loadCSSToiFrame(iframeId, filename) 
       var file = document.createElement("link");
       file.setAttribute("rel", "stylesheet");
       file.setAttribute("type", "text/css");
       file.setAttribute("href", filename);
       document.getElementById(iframeId).contentWindow.document.head.appendChild(file);
    
  
    // just call a function to load your CSS
    // this path should be relative your html location
    loadCSS("iframe_id", "stylesheet.css");