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

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

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

  1. <iframe name="test" src="child.html"></iframe>

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

  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对象里,同上,关键是获取该对象。

  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不支持.

  1. <iframe id="testId" src="child.html"></iframe>
  2. //======
  3. var doc=document.getElementById('testId');
  4. //或者
  5. var doc=document.getElementsByTagName('iframe')[0];
  6. 然后
  7. var winOrdoc=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对象.

  1. parent.window.document.getElementById('parentMenu');
  2. //简写
  3. parent.document.getElementById('parentMenu');

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

  1. parent.parentFunction();

最后提一下js的同源策略,即位于A网站的js代码不允许访问位于B网站的内容,即使该代码来源于B网站。假如帧是其它网站的页面,那么按上述方法互相访问时,浏览器应该会提示:'没有权限'错误。

javascript父、子页面交互小结的更多相关文章

  1. javascript控制子页面对父页面控件操作

    //赋值 window.parent.document.getElementById("partyid_trade_edit").value = data.data.partyid ...

  2. AppBox v6.0中实现子页面和父页面的复杂交互

    前言 1. AppBox是捐赠开源(获取源代码至少需要捐赠作者 1 元钱),基于的 FineUI(开源版)则是完整开源,网址:http://fineui.codeplex.com/ 2. 你可以通过捐 ...

  3. JavaScript从父页面获取子页面的值(子页面又如何访问父页面)

    之前还真没做过类似的东西,,top页面获取子页面的document.. 在百度搜了下即找到这个东东,还好,能用. 主要就是使用 contentWindow方法,获取子页面的所有document,再做处 ...

  4. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  5. IFrame父页面和子页面的交互

    现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面 ...

  6. iframe子页面调用父页面javascript函数的方法

    1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...

  7. javascript中父、子页面间调用

    本文主要转自:http://www.360doc.com/content/11/0525/17/6161903_119333834.shtml                    http://zh ...

  8. iframe父页面与子页面的交互

    iframe子页面调用父页面的变量.js方法.元素(非跨域): window.parent.varName; //获取父页面js全局变量 window.parent.fnName; //获取父页面js ...

  9. 父页面操作iframe子页面的安全漏洞及跨域限制问题

    一.父子交互的跨域限制 同域情况下,父页面和子页面可以通过iframe.contentDocument或者parent.document来交互(彼此做DOM操作等,如父页面往子页面注入css). 跨域 ...

随机推荐

  1. 本地计算机上的OracleOraDb11g_home2TNSListener服务启动又停止了。一些服务自动停止,如果他们没有什么可做的 .

    一.问题 本地计算机上的OracleOraDb10g_home1TNSListener 服务启动又停止了 二.问题描述 Oracle:本地计算机上的OracleOraDb10g_home1TNSLis ...

  2. hyper-v虚拟网络配置

    今天重新整整几个月前装的hyper-v,系统早已经装好但是网络不通. hyper-v虚拟网络分为3种:外部网络,内部网络和专用网络. 外部网络:虚拟机可以连接主机和外部网络. 内部网络:虚拟机可以连接 ...

  3. 算法笔记_047:复数运算(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 编程实现两个复数的运算.设有两个复数 和 ,则他们的运算公式为: 要求:(1)定义一个结构体类型来描述复数. (2)复数之间的加法.减法.乘法和除法 ...

  4. 打造通用的Android下拉刷新组件(适用于ListView、GridView等各类View)

    前言 近期在做项目时,使用了一个开源的下拉刷新ListView组件.极其的不稳定,bug还多.稳定的组件又写得太复杂了,jar包较大.在我的一篇博客中也讲述过下拉刷新的实现,即Android打造(Li ...

  5. LOL电影天堂下载攻略

      LOL电影天堂&&飘花电影网下载攻略 CreateTime--2017年7月27日08:52:29Author:Marydon 以进击的巨人为例 下载地址:http://www.l ...

  6. Ldap登陆AD(Active Directory)进行认证的Java示例

    原文地址:http://hi.baidu.com/js2007/item/24efbb0fae1c9b90a3df432a package LdapTest; import java.util.Has ...

  7. OSSSME - 开源软件助力中小企业发展

    怀揣着为中小企业量身定做一整套开源软件解决方案的梦想开始了一个网站的搭建.http://osssme.org/ [2013-8-2] 由于同时更新2个站点的信息比较繁琐,今后所有和iDempiere. ...

  8. 温故而知新 js 的错误处理机制

    // 在函数块的try中return,会直接成为函数的return值 function test() { try { alrt(123) return 'success' } catch(err) { ...

  9. unity, GUIStyle and Skin

    例1: using UnityEngine; using System.Collections; using UnityEditor; using System.Collections.Generic ...

  10. ajax提交数据处理总结

    一:Ajax中Get请求与Post请求的区别  http://www.cnblogs.com/oneword/archive/2011/06/06/2073533.html 二:ajax分页: 360 ...