child

> 也许你正在面临修改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 // 借助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($('') ); }); // style.css body { background-color: aqua; } ``` 这样我们就修改了iframe中body的背景色。 ## 跨域修改iframe中元素的样式使用到的方法如下： - [Window.postMessage()](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage) - window.addEventListener("message",cb()）父级页面中引入了一个不同域名下的iframe，第一，需要在父级页面发送信息，第二，在iframe页面内监听并处理信息，来间接的修改样式。这是为了保证跨域通信的安全，详细内容参考 [这里](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)。下面介绍具体做法：父级页面引入了一个跨域的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 ``` 可以看出，我们在接收到父级传来的消息，根据消息的内容来修改了cross.html body的背景色。并且在这里我们可以做一下是否同源的安全校验。 > 到这里我们可以得出一个结论：如果你嵌入的iframe页面和父级不是同一域下，而且当你可以在iframe页面中监听事件，这样你才能修改它内部的样式，否则无法修改。 [文章首发于《IICOOM-个人博客 | 技术博客》](https://www.iicoom.top/posts/41)