我能否将CSS应用于iframe内的元素？

Question

我经常看到一些站点使用包含外部网址的iframe，并在顶部框架中提供用户JavaScript功能，例如用户分析软件、Digg栏等等...有没有类似的实验技巧呢？=）很想知道。

- RadiantHex

Answer 1

不，不是从iframe外部。一个<iframe>就像一个独立的世界。如果域名等匹配，那么Javascript可以在内部和外部通信，并且（如果想要的话）可以向子框架中注入CSS。

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

- Pointy

---

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

如果您在同一域上，那么来自父页面的Javascript可能会干扰框架的内容。父页面的CSS不会影响框架页面，但是Javascript可以更改CSS或更改元素样式等。 - Pointy

有没有什么方法可以使用一些技术来嵌入子iframe或postMessage之类的东西来完成这个？ http://pipwerks.com/2008/11/30/iframes-and-cross-domain-security-part-2/http://johan.driessen.se/posts/resizing-cross-domain-iframes - Steve Robinson

Answer 2

如果是相同域名，您可以使用以下 JavaScript 干预 iframe 内容： 假设 iframe 的 id 是 IframeId。您想要更改 id 为 "elementId" 的元素的颜色。

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

- Rhushikesh Chaudhari

Answer 3

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

    // 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");

- Andrey

---

这个不起作用 -> 跨域错误 - undefined