我经常看到网站使用包含外部站点的 iframe 和包含用户 JavaScript 功能的顶部框架。
例如用户分析软件、Digg bar 等...
尝试类似的东西的任何提示？=) 知道会很棒
我可以将 CSS 应用于 iframe 中的元素吗？
IT技术
javascript
html
css
dom
iframe
2021-03-10 20:30:57
3个回答
不，不是来自iframe之外。An<iframe>是它自己的世界。如果域等匹配，则 Javascript 可以进出通信，并且可以（如果它想）将 CSS 注入子框架。
如果<iframe>包含来自不同域的内容，您几乎无能为力。父页面控制框架的大小和是否可见，可以通过定位等方式将自己的内容放在框架上，但不能直接影响实际框架内容的呈现方式。
如果它属于同一个域，您可以使用 javascript 干扰 iframe 内容，如下所示.. 假设 iframe 的 id 是IframeId. 并且您想更改 id 为“elementId”的元素的颜色。
$("iframe").load(function() {
var frameContents;
frameContents = $("#IframeId").contents();
frameContents.find("#elementId").css("color","#fff");
});
这可以通过将 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");