如何使用 JavaScript 从 iFrame 的最里面的 body 标签中设置最外面的 body 标签的样式？
<html>
<head>
</head>
<body>
<div id="ad_tag" style="width: 1px; height: 1px;">
<div id="ad_container" style="border: 0pt none;">
<iframe id="ad_iframe" title="title" name="name" scrolling="no" marginwidth="0" marginheight="0" style="border: 0px none; vertical-align: bottom;" srcdoc="" width="1" height="1" frameborder="0">
<html>
<head>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<script>
parent.document.body.style.background = "url('https://news.nationalgeographic.com/content/dam/news/photos/000/676/67655.jpg') no-repeat top center fixed #ffffff";
</script>
</body>
</html>
</iframe>
</div>
</div>
<div id="content">
</div>
</body>
</html>
- 在这个具体案例中:
- 不允许直接编辑属性或样式，现有的是预设的。
- 只能编辑最里面的主体的子元素。
- 目标是使用 Google DFP 转换背景图片。
最佳答案
最好的方法是使用来自框架的发布消息，父级(站点)将通过监听器执行。 所以你的 iframe 应该包含一些代码，比如:
<script>
window.parent.postMessage({
'func': 'changeBackground',
'message': ''
}, "*");
</script>
你的 parent (网站)应该包含一个像这样的听众:
<script type="text/javascript">
if (window.addEventListener) {
window.addEventListener("message", onMessage, false);
}
else if (window.attachEvent) {
window.attachEvent("onmessage", onMessage, false);
}
function onMessage(event) {
var data = event.data;
if (typeof(window[data.func]) == "function") {
window[data.func].call(null, data.message);
}
}
function changeBackground(message) {
$('div#backgroundwrapper').css({
'background-image': 'url("https:/example.com/example.jpg")',
$('div#backgroundwrapper').click();
var win = window.open( '%%CLICK_URL_ESC%%%%DEST_URL%%', '_blank');
win.focus();
});
}
</script>
在我的示例中，它会将图像文件作为背景放在 ID 为 backgroundwrapper 的 div 上。我的示例使用 jQuery 更改 CSS 并添加点击标签，但也可以在没有它的情况下制作。
关于iframe 之外的 JavaScript 样式正文，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49970450/