HTMLIFrameElement.contentDocument
使用这个方法获取页面iframe中的dom对象，注意可能会有下面两种结果：
- 如果iframe和它的父级在同一个域名下，那么这个方法返回document（是一个嵌套的浏览器上下文环境）
- 如果iframe和它的父级不在同一个域名下，那么这个方法返回null
不跨域修改iframe中元素的样式 直接获取到元素修改
let iframeDocument = document.getElementsByTagName("iframe")[0].contentDocument;
iframeDocument.body.style.backgroundColor = "blue";
// This would turn the iframe blue.通过上面的操作，把iframe中body的背景色修改为“blue”
在iframe的head中插入样式表
// 页面上有一个id为i1的iframe，它嵌入的是同源的文件 child.html// 借助jQuery在iframe加载后，向其内部插入style.css
$('#i1').load(function () {let cssLink = document.createElement("link");
cssLink.href = "https://www.it610.com/article/style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
$('#i1')
.contents().find("head")
.append($('')
);
});
// style.css
body {
background-color: aqua;
}这样我们就修改了iframe中body的背景色。
跨域情况下修改iframe中元素的样式 【修改iframe内部元素的样式】使用到的方法如下：
- Window.postMessage()
- window.addEventListener("message",cb()）
下面介绍具体做法：
假如父级页面引入了一个跨域的iframe，id为i3
// 在它加载完成后，执行下面的方法
function load() {
console.log('loaded')
activateTheme("light");
}// 这里我们封装了一个activateTheme方法，方便后边复用，作用是修改iframe内部的主题颜色
function activateTheme(theme) {
var iframe = document.getElementById("i3");
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage(theme, "*");
}
}当iframe加载完成后，我们向它内部传递了activateTheme("light"); 浅色主题的消息，下面看下它内部如何接收并做出响应：
// cross.html
child body,
body.theme-light {
background-color: #ededed;
padding: 1rem;
}body.theme-dark {
background-color: #444;
color: #fff;
}
可以看出，我们在接收到父级传来的消息，根据消息的内容来修改了cross.html body的背景色。并且在这里我们可以做一下是否同源的安全校验。
到这里我们可以得出一个结论：如果你嵌入的iframe页面和父级不是同一域下，而且你可以在iframe页面中监听事件，这样你才能修改它内部的样式，否则无法修改。
