怎么设置iframe大小（修改iframe内部元素的样式）
HTMLIFrameElement.contentDocument
使用这个方法获取页面iframe中的dom对象 ，注意可能会有下面两种结果：
如果iframe和它的父级在同一个域名下 ，那么这个方法返回document（是一个嵌套的浏览器上下文环境） 如果iframe和它的父级不在同一个域名下 ，那么这个方法返回null有了上面的这个原则 ，我们就知道在不跨域的情况下我们能够更容易的修改iframe内部元素的样式 ，跨域情况则无法获取到iframe内部的元素 ，只能通过其他方式来达到目的（下面会介绍） ，首先来看下不跨域是怎样做的 。
不跨域修改iframe中元素的样式
方式1：直接获取到元素修改
let iframeDocument = document.getElementsByTagName("iframe")[0].contentDocument; iframeDocument.body.style.backgroundColor = "blue"; // This would turn the iframe blue.通过上面的操作 ，把iframe中body的背景色修改为“blue ”
方式2：在iframe的head中插入样式表
// 页面上有一个id为i1的iframe ，它嵌入的是同源的文件 child.html <iframe id="i1" src="./child.html" frameborder="0" width="100%" height="400"></iframe> // 借助jQuery在iframe加载后 ，向其内部插入style.css $(#i1).load(function () { let cssLink = document.createElement("link"); cssLink.href = "style.css"; cssLink.rel = "stylesheet"; cssLink.type = "text/css"; $(#i1) .contents().find("head") .append($(<link rel="stylesheet" type="text/css" href="style.css">) ); }); // style.css body { background-color: aqua; }这样我们就修改了iframe中body的背景色 。
跨域修改iframe中元素的样式
使用到的方法如下：
Window.postMessage() window.addEventListener(“message ”,cb()）父级页面中引入了一个不同域名下的iframe ，第一 ，需要在父级页面发送信息 ，第二 ，在iframe页面内监听并处理信息 ，来间接的修改样式 。这是为了保证跨域通信的安全 ，详细内容参考 这里 。
下面介绍具体做法：
父级页面引入了一个跨域的iframe ，id为i3 <iframe id="i3" src="./cross.html" onload="load()"></iframe> // 在它加载完成后 ，执行下面的方法 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 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>child</title> <style> body, body.theme-light { background-color: #ededed; padding: 1rem; } body.theme-dark { background-color: #444; color: #fff; } </style> </head> <body> <script> window.addEventListener("message", function (event) { if (event.origin === window.location.origin) { console.log(event.data) document.body.classList = [] document.body.classList.add(`theme-${event.data}`) } }, false ); </script> </body> </html>可以看出 ，我们在接收到父级传来的消息 ，根据消息的内容来修改了cross.html body的背景色 。并且在这里我们可以做一下是否同源的安全校验 。
到这里我们可以得出一个结论：如果你嵌入的iframe页面和父级不是同一域下 ，而且当你可以在iframe页面中监听事件 ，这样你才能修改它内部的样式 ，否则无法修改 。
文章首发于 IICOOM-个人博客|技术博客 《修改iframe内部元素的样式》
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！