首页 > 网站 > WEB开发 > 正文

javascript父、子页面交互小结

2024-04-27 14:21:19
字体:
来源:转载
供稿:网友

javascript父、子页面交互小结

帧用来存放子页面,既可以是iframe,又可以是frameset。window对象是全局对象,页面上的一切函数和对象都在它的作用域里。 1、parent代表父窗口、如果父窗口又存在若干层嵌套,则top代表顶级父窗口。self代表窗口自身。

Java代码收藏代码
  1. if(self==top){//}判断窗口是否处于顶级
  2. if(self==parent){}//也可以

2.1、父页面访问子页面元素。思路是子页面的元素都在其window.document对象里面,先获取它然后就好说了。 帧最好设置name属性,这样操作最方便。如

Java代码收藏代码
  1. <iframename="test"src="child.html"></iframe>

假如要获取child.html里面id为'menu'的元素,则可以这样写:

Java代码收藏代码
  1. window.frames["test"].document.getElementById('menu');
  2. //由于所有的函数都存放在window对象里面,可去掉开头的window:
  3. frames["test"].document.getElementById('menu');
  4. //在浏览器中,帧的name属性被默认等同于子页面的window对象,因此可以进一步简写:
  5. test.document.getElementById('menu');

2.2 父页面访问子页面函数或对象。子页面的函数和对象都在其window对象里,同上,关键是获取该对象。

Java代码收藏代码
  1. //假如child.html定义了showMesg函数,需要在父中调用,则这样写
  2. window.frames['test'].showMesg();
  3. //简写形式
  4. test.showMesg();
  5. //同理,对象也是如此访问
  6. alert(test.person);

2.3 其他获取document的方式。先使用'document.getElementById()'或'document.getElementsByTagName()'把帧作为document下的Element获取,然后访问其属性contentDocument/contentWindow (iframe、frame特有),其中第一个ie7-不支持,第二个Chrome不支持.

Java代码收藏代码
  1. <iframeid="testId"src="child.html"></iframe>
  2. //======
  3. vardoc=document.getElementById('testId');
  4. //或者
  5. vardoc=document.getElementsByTagName('iframe')[0];
  6. 然后
  7. varwinOrdoc=doc.contentDocument||doc.contentWindow;//二选一
  8. if(winOrdoc.document)winOrdoc=winOrdoc.document;
  9. winOrdoc.getElementById('menu');
  10. //如果需要window对象,则这样写:
  11. if(winOrdoc.defaultView)winOrdoc=winOrdoc.defaultView;

3.1子页面访问父页面元素。思路同2.1,先获取父窗口window.document对象.

Java代码收藏代码
  1. parent.window.document.getElementById('parentMenu');
  2. //简写
  3. parent.document.getElementById('parentMenu');

3.2,子页面访问父页面函数或对象。思路同2.2,先获取父窗口window对象。

Java代码Flashvars" value="clipboard=parent.
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表