是否有可能改变一个div的风格,居住在一个iframe在页面上使用CSS只?
当前回答
你需要JavaScript。这与在父页面中执行相同,只是必须在JavaScript命令前加上iframe的名称。
请记住,应用同源策略,因此只能对来自您自己服务器的iframe元素执行此操作。
我使用Prototype框架来简化:
frame1.$('mydiv').style.border = '1px solid #000000'
or
frame1.$('mydiv').addClassName('withborder')
其他回答
如果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;
...
...
});
就像尤金说的,一种粗鄙的做事方式。我最终遵循他的代码,并链接到我的自定义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
可能不是你想的那样。在CSS文件中iframe也必须<link>。如果它在不同的域上,你甚至不能用javascript做到这一点。
使用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);