也许你正在面临修正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-个人博客 | 技能博客》