JS操作iframe里的dom(实例讲解)

关于JS操作iframe里的dom，以下是完整攻略：

1. iframe简介

iframe是HTML中嵌入其他HTML页面的标签，即在当前页面内嵌入并展示另一个HTML页面。它可以是跨域的，也可以是同域的。在开发中，经常会用到iframe来展示一些独立的组件或页面。

2. JS操作iframe

在父页面内，我们可以通过JS来操作iframe内部的DOM元素。操作iframe内部元素有多种方式，以下列出其中两种实现方法：

2.1 通过iframe的ID获取到iframe元素

var f = document.getElementById("myiframe");  // 获取iframe元素
var iframeDoc = f.contentDocument || f.contentWindow.document;  // 获取iframe内部文档对象
iframeDoc.getElementById("targetElement").style.display = "none";  // 使用iframe内部文档进行DOM操作

上述代码中，首先通过ID获取到iframe元素，然后通过contentDocument或contentWindow.document方法获取到iframe内部的文档对象。最后就可以通过获取到的文档对象来直接进行DOM操作，比如隐藏iframe内部元素。

2.2 通过获取iframe内部window对象来进行DOM操作

var f = document.getElementById("myiframe");  // 获取iframe元素
var iframeWin = f.contentWindow;  // 获取iframe内部window对象
var iframeDoc = iframeWin.document;  // 获取iframe内部文档对象
iframeWin.postMessage('Hello from the parent window!', '*');  // 向iframe内部发送消息

上述代码中，首先通过ID获取到iframe元素，然后通过contentWindow获取到iframe内部window对象。通过window对象获取到iframe内部的文档对象进行DOM操作，或者使用postMessage方法向iframe内部发送消息。这种方式相对于第一种方式，可以考虑到cross origin的问题，更加灵活。

3. 两个操作iframe的小案例

3.1 父页面获取iframe内部的元素文本内容并打印

<!-- 父页面中的代码 -->
<iframe id="myiframe" src="./iframe.html"></iframe>
<script>
var f = document.getElementById("myiframe");  // 获取iframe元素
var iframeDoc = f.contentDocument || f.contentWindow.document;  // 获取iframe内部文档对象
var innerText = iframeDoc.getElementById("target").innerText;  // 获取iframe内部文本元素的内容
console.log(innerText);  // 打印文本内容
</script>

<!-- iframe内部的代码 -->
<div id="target">我是一个iframe</div>

上述代码中，首先在父页面通过ID获取到iframe元素，然后获取iframe内部的文档对象。通过文档对象再获取到iframe内部的文本元素内容，最后进行打印。

3.2 iframe内部页面监听父页面传来的消息并alert弹框展示

<!-- 父页面中的代码 -->
<iframe id="myiframe" src="./iframe.html"></iframe>
<script>
var f = document.getElementById("myiframe");  // 获取iframe元素
var iframeWin = f.contentWindow;  // 获取iframe内部window对象

iframeWin.addEventListener("message", function(event) {  // 监听来自iframe子页面的消息
    alert(event.data);  // 弹框展示消息
});
</script>

<!-- iframe内部的代码 -->
<script>
window.parent.postMessage('Hello from the iframe!', '*');  // 向父页面发送消息
</script>

上述代码中，在父页面中通过ID获取到iframe元素，然后获取到iframe内部的window对象。通过window对象的addEventListener方法监听来自iframe子页面的消息。在iframe子页面中通过window.parent.postMessage方法向父页面发送消息，消息内容为Hello from the iframe!，第二个参数表示通信目标窗口的url，*表示允许向任何url发送消息。当父页面接收到子页面的消息时，通过alert方法弹框显示消息内容。

以上就是关于JS操作iframe里的dom的完整攻略，通过以上的示例，相信大家对于如何操作iframe里的dom有了更深刻的理解。