使用CSS来影响iframe内部的div样式

是否有可能改变一个div的风格，居住在一个iframe在页面上使用CSS只?

547727 次浏览
小开

简而言之，没有。

您不能将CSS应用于iframe中加载的HTML，除非由于跨域资源限制，您可以控制iframe中加载的页面。

小开

可能不是你想的那样。在css文件中iframe也必须<link>。如果它在不同的域上，你甚至不能用javascript做到这一点。

小开

你需要JavaScript。这与在父页面中执行相同，只是必须在JavaScript命令前加上iframe的名称。

请记住，应用同源策略，因此只能对来自您自己服务器的iframe元素执行此操作。

我使用原型框架来简化:

frame1.$('mydiv').style.border = '1px solid #000000'

或

frame1.$('mydiv').addClassName('withborder')
小开

简单的回答是:不，对不起。

仅仅使用CSS是不可能的。你基本上需要控制iframe内容，以便对它进行样式化。有一些方法使用javascript或你选择的web语言(我读过一点，但我自己不熟悉)来动态插入一些所需的样式，但你需要直接控制iframe内容，这听起来好像你没有。

小开
< p >是的。看看另一个线程的细节: 如何将CSS应用到iframe? < / p > 
const cssLink = document.createElement("link");
cssLink.href  = "style.css";
cssLink.rel   = "stylesheet";
cssLink.type  = "text/css";
frames['frame1'].contentWindow.document.body.appendChild(cssLink);
//     ^frame1 is the #id of the iframe: <iframe id="frame1">
小开

是的，这是可能的，尽管很麻烦。您需要将页面的HTML打印/回显到页面主体中，然后应用CSS规则更改函数。使用上面给出的相同示例，本质上是使用在页面中查找div的解析方法，然后对其应用CSS，然后将其重新打印/回显给最终用户。我不需要这个，所以我不想把这个函数编码到另一个网页的CSS中的每一个项目中，只是为了适应。

引用:

小开

使用Jquery和等待，直到源被加载， 这就是我如何实现(使用角间隔，你可以使用javascript setInterval方法):

var addCssToIframe = function() {
if ($('#myIframe').contents().find("head") != undefined) {
$('#myIframe')
.contents()
.find("head")
.append(
'<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
$interval.cancel(addCssInterval);
}
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);
小开

你可以先检索iframe的内容，然后像往常一样对它们使用jQuery选择器。

$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")


$("#iframe-id").contents().find("img").addClass("fancy-zoom")


$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });

好运！

小开

客户端不可能。一个javascript错误将被提出“错误:权限拒绝访问属性“文档””，因为Iframe不是你的域的一部分。 唯一的解决方案是从服务器端代码中获取页面并更改所需的CSS

小开

就像尤金说的，一种粗鄙的做事方式。我最终遵循他的代码，并链接到我的自定义Css页面。我的问题是，有了twitter的时间轴，你必须做一些回避twitter来覆盖他们的代码一点点。现在我们有一个滚动的时间轴与我们的css，即更大的字体，适当的行高和使滚动条隐藏的高度大于他们的限制。

var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary
小开

显然，它可以通过jQuery完成:

$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});

https://stackoverflow.com/a/13959836/1625795 < a href = " https://stackoverflow.com/a/13959836/1625795 " > < / >

小开

只要添加这个，一切都很好:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
小开

结合不同的解决方案，这对我来说是有效的。

$(document).ready(function () {
$('iframe').on('load', function() {
$("iframe").contents().find("#back-link").css("display", "none");
});
});
小开

如果iframe来自另一个服务器，你会有类似的CORS错误:

Uncaught DOMException: Blocked a frame with origin "https://your-site.com" from accessing a cross-origin frame.

只有在你可以控制这两个页面的情况下，你才能使用https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage安全地发送这样的消息:

在你的主站(一个加载iframe的站点):

const iframe = document.querySelector('#frame-id');
iframe.contentWindow.postMessage(/*any variable or object here*/, 'https://iframe-site.example.com');

在iframe网站上:

// Called sometime after postMessage is called
window.addEventListener("message", (event) => {
// Do we trust the sender of this message?
if (event.origin !== "http://your-main-site.com")
return;
...
...
  

});

提交答案