修改iframe内部元素的样式

良_123

2024-04-14 帮助1人

HTMLIFrameElement.contentDocument
使用这个方法获取页面iframe中的dom对象，注意可能会有下面两种结果：

有了上面的这个原则，我们就知道在不跨域的情况下我们能够更容易的修改iframe内部元素的样式，跨域情况则无法获取到iframe内部的元素，只能通过其他方式来达到目的（下面会介绍），首先来看下不跨域是怎样做的。

不跨域修改iframe中元素的样式

let iframeDocument = document.getElementsByTagName("iframe")[0].contentDocument;
iframeDocument.body.style.backgroundColor = "blue";
// This would turn the iframe blue.

或者参考：

通过上面的操作，把iframe中body的背景色修改为“blue”

// 页面上有一个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="https://blog.csdn.net/helloxiaoliang/article/details/style.css">')
);
});
// style.css
body {
background-color: aqua;
}

这样我们就修改了iframe中body的背景色。

使用到的方法如下：

父级页面中引入了一个不同域名下的iframe，第一，需要在父级页面发送信息，第二，在iframe页面内监听并处理信息，来间接的修改样式。这是为了保证跨域通信的安全，详细内容参考这里。

下面介绍具体做法：
父级页面引入了一个跨域的iframe，id为i3

当iframe加载完成后，我们向它内部传递了activateTheme(“light”);浅色主题的消息，下面看下它内部如何接收并做出响应：

可以看出，我们在接收到父级传来的消息，根据消息的内容来修改了cross.html body的背景色。并且在这里我们可以做一下是否同源的安全校验。

到这里我们可以得出一个结论：如果你嵌入的iframe页面和父级不是同一域下，而且当你可以在iframe页面中监听事件，这样你才能修改它内部的样式，否则无法修改。

这篇好文章是转载于：学新通技术网