通过js或jQuery,子父窗口之间元素、方法、window的相互获取

条件:以下支持火狐浏览器,若在谷歌浏览器中使用,子窗口需要配置父窗口的跨域。

1、js在子窗口获取父窗口的window

window.parent

//此时可以调用父窗口的window方法,比如获取父窗口的高度window.parent.innerHeight,宽度window.parent.innerWidth,移动父窗口的位置等,具体的可以看本人博客的《获取浏览器窗口的尺寸及对浏览器窗口的一些操作》篇。


2、js在父窗口获取子窗口的window

$("#testiframe")[0].contentWindow==document.getElementById("testiframe").contentWindow==window.frames[0]

以上三种都可以获取子窗口的window,上面三种对应的如下所示:


3、jquery在iframe子页面获取父页面元素代码如下:

$("#objid",parent.document);


4、jquery在父页面获取iframe子页面的元素
代码如下:

$("#objid",document.frames('iframename').document)


5、js在iframe子页面获取父页面元素代码如下:

window.parent.document.getElementById("元素id");


6、js在父页面获取iframe子页面元素代码如下:

window.frames["iframe_ID"].document.getElementByIdx_x("元素id");


7、子窗口iframe内调用父窗口函数:

parent.func();

//前提是父窗口的js中必须有func()这个方法。


8、父窗口中调用子窗口函数

document.getElementById(子窗口 ifram 元素的ID值).contentWindow.子窗口中的方法()

子窗口 ifram 元素的name值.window.子窗口中的方法()


下面是我写的一个demo,大家在测试示例时,注意要在火狐浏览器下测试,原因请看本文的开头

父窗口页面  outter.html




    
    
    
    Document
    
    


    
    
这是父窗口页面


子窗口页面   inner.html




	
	Document
	


	这是子窗口页面
	

你可能感兴趣的:(JavaScript学习随笔)