Home » Code » javascript操作iframe里的dom

javascript操作iframe里的dom

我们准备好这么两个窗口,演示如何在父窗口操作iframe,以及在iframe中操作父窗口。

父窗口:

<iframe id="iframe-id" name="iframeName" src="test2.html" style="width: 400px;height: 200px"></iframe>
<div class="wrap">
	<h2>这是父窗口的内容</h2>
	<div class="action">
		<button id="copy-iframe-button">点击复制iframe内的button到父窗口</button>
		<button id="button">我是父窗口的button</button>
	</div>

</div>

iframe窗口:

<div class="wrap">
	<h2>这是iframe内的内容</h2>
	<div class="action">
		<button id="copy-parent-button">点击复制父窗口的button到iframe内</button>
		<button class="iframe-button">我是iframe中的button</button>
	</div>
</div>

要做的事很简单,在父窗口操作iframe,实现点击iframe中的按钮,复制父窗口的按钮到iframe中。以及在iframe中操作父窗口,实现点击父窗口中的按钮,复制iframe中的按钮到父窗口。

当前窗口操作iframe

var iframeElement = document.getElementById("iframe-id");
iframeElement.addEventListener("load", function(){
	var iframeWindow = iframeElement.contentWindow;//iframe内的window
	//iframe内的window对象也可这样获得:window.iframeName或者window.frames[0]

	var iframeDocument = iframeElement.contentDocument || 
		iframeElement.contentWindow.document;//iframe内的document

	var btn = document.getElementById("button");//父窗口的按钮
	iframeDocument.getElementById("copy-parent-button").addEventListener("click", function(){
		//将父窗口的按钮插入iframe
		iframeDocument.querySelector(".wrap").appendChild(btn.cloneNode(true));
	})	
});

//jq版

$("#iframe-id").on("load", function(){
	var $iframe = $(this).contents();
	$iframe.find("#copy-parent-button").click(function(){
		$("#button").clone().appendTo($iframe.find(".wrap"));
	})
})

总结:

  • 获得iframe中的window,使用iframeElement.contentWindow
  • 获得iframe中的window,也可以使用window.iframeName或者window.frames[index]
  • 获得iframe中的document,使用iframeElement.contentDocument或iframeElement.contentWindow.document(旧IE)
  • 使用jQuery的contents()方法,可以直接获得iframe的document的jq对象

iframe操作父窗口

var parentDocument = parent.document;//父窗口document
var parentWindow = parent.window;//父窗口window
//parent表示上一级窗口,self表示当前窗口,top最顶层窗口
//当当前即为最顶层时,parent=self=top

var btn = document.querySelector(".iframe-button");
parentDocument.getElementById("copy-iframe-button").addEventListener("click", function(){
	//将iframe的按钮插入父窗口
	parentDocument.querySelector(".wrap").appendChild(btn.cloneNode(true));
});

总结:

  • parent表示父窗口,父窗口的window是parent.window,父窗口的document是parent.document
  • parent.parent是父窗口的父窗口,top是顶层窗口,当前窗口是self。当前窗口为顶层窗口时self=parent=top
  • 使用jQuery的话,是$(parent.document)获得父窗口document的jq对象,$(parent.window)不行

有时候总免不了要跟iframe打一下交道,了解基本的操作很有必要,故记录一下。下边是上面代码的demo:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.