JavaScript子页面和父页面相互访问
分类:实例代码
JavaScript子页面和父页面相互访问属于前端实例代码,有关更多实例代码大家可以查看。
本章节介绍一下如何实现父页面和子页面直接相互访问。
一.知识准备:
子页面可以使用iframe引入也可以使用frameset。window对象是全局对象,页面中的所有函数和对象都存在于它的作用域之中。
如果页面具有多层嵌套效果,可以使用self、top或者parent进行访问,它们都属于window对象.
1.window.self可以返回当前窗口对象。
2.widow.top可以返回最顶级窗口对象。
3.window.parent可以返回父窗口对象。
二.父页面访问子页面:
加入在父页面中有如何子页面,代码如下:
<iframe name="antzone" src="child.html"></iframe>
获取页面的元素对象可以使用如下的代码:
document.getElementById("theid")
当然上面只是一个例子而已,无一例外,函数都是通过document对象调用的,这只是一个简写,完整写法如下:
window.document.getElementById("theid")
那么我们只要获取子页面的window对象那么就实现访问子页面的功能,代码如下:
window.frames["antzone"].document.getElementById('menu');
上面的代码可以获取子页面id属性值为menu的元素对象。
三.子页面访问父页面:
其实和父页面访问子页面相同的道理,代码如下:
parent.window.document.getElementById('parentid'); //简写形式 parent.document.getElementById('parentid');
JavaScript子页面和父页面相互访问,这样的场景在实际项目中还是用的比较多的,关于JavaScript子页面和父页面相互访问就介绍到这了。