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子页面和父页面相互访问就介绍到这了。

回复

我来回复
  • 暂无回复内容