javascript父子页面通讯实例详解

本文实例讲述了javascript父子页面通讯的实现方法。分享给大家供大家参考。具体分析如下：

如果一个domain为 www.abc.com的页面内部包含一个name属性值为childFrame的iframe，并且这个iframe的domain为 static.abc.com。那么可以通过设置父页面的domain为abc.com，子页面的domain也为abc.com，然后实现父子页面通讯（我这里有点混淆父子页面和跨域的概念。

不采用上面的方法也是可以实现父子页面相互访问的。
方法是：在父页面用window.frames[0]或者window.frames["childFrame"]，返回的是一个Window对象，然后就可以通过：

var childWindow = window.frames[0];
// 或者 window.frames["childFrame"] 或者直接childFrame 或者childFrame.window
var childDoc = childWindow.contentDocument || childWindow.document;

利用childWindow可以访问执行子页面定义的函数，利用childDoc可以访问子页面的DOM节点。

而子页面要访问父页面，可以通过parent（Window对象），如果一个页面已经是顶级页面那么parent==self将返回true：

if(parent != self) {
// 当前页面有父页面
  // 调用父页面的函数
  parent.parentFunc();
  var parentDoc = parent.contentDocument || parent.document;
  // 访问父页面的DOM节点
}

www.abc.com父页面：

document.domain = 'abc.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://static.abc.com/';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
  var doc = ifr.contentDocument || ifr.contentWindow.document;
  // 在这里操纵子页面
  alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};

www.static.abc.com子页面：

代码如下:

document.domain = 'abc.com';

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • javascript在子页面中函数无法调试问题解决方法

    近期在做一个项目,会遇到在子页面中提交的时候会无法能够调试javascript代码的情况出现,有时候这种问题,我们无法正常在浏览器,看到我们子页面的javascript代码,所以只能够用原始的alert 或者 console.log(),当然,这也是一种解决方法,但是有时候,我们就想看一下程序到底是如何运行的,同时也可以看每个参数到底是什么值,所以意义还是比较大的. 我贴张图,大家就大概了解是什么时候会出现这个问题了. 复制代码 代码如下: <script> function stopWatc

  • js刷新框架子页面的七种方法代码

    面以三个页面分别命名为framedemo.html,top.html,button.html为例来具体说明如何做. 其中framedemo.html由上下两个页面组成,代码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> frameDemo </TITLE> </HEAD&

  • js子页面获取父页面数据示例

    做页面预览的时候,数据没有存入数据库,但是要打开一个页面进行预览,询问众大婶,原来是这样来做. 1.父页面 复制代码 代码如下: <input type="text" id="name" value="zhangsan"/> <a href="a.html" target="_blank">预览</a> 2.子页面,也就是a.html获取父页面中文本框的value 复制代

  • JS父页面与子页面相互传值方法

    一.子页面是父页面通过window.open弹出的情况子页面要向父页面传值,只要在document前面加window.opener即可. 如: 1.父页面代码: <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><titl

  • javascript 装载iframe子页面，自适应高度

    假设主页面有一个div,里面放置一个iframe 复制代码 代码如下: <div id="frameBox"> <iframe id="frameWin" src="1.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no"></

  • javascript关于open.window子页面执行完成后刷新父页面的问题分析

    本文实例分析了javascript关于open.window子页面执行完成后刷新父页面的方法.分享给大家供大家参考.具体分析如下: 主页面: <input id="btnAdd" type="button" onclick="openWin();" value="添加" /> 在js中有如下代码: function openWin() { window.open('addInfo.jsp', '_blank', '

  • js父页面与子页面不同时显示的方法

    本文实例讲述了js父页面与子页面不同时显示的方法,可实现打开一个页面后,父页面DISABLE,在子页面关闭后,父页面ENABLE.分享给大家供大家参考.具体方法如下: 复制代码 代码如下: function onNewClick() {     var url = "VesselScheduleNEW.aspx";     if (null!=newWin && newWin.closed) newWin=null;        if (null==newWin)  

  • javascript父、子页面交互技巧总结

    帧用来存放子页面,既可以是iframe,又可以是frameset.window对象是全局对象,页面上的一切函数和对象都在它的作用域里. 1.parent代表父窗口.如果父窗口又存在若干层嵌套,则top代表顶级父窗口. self代表窗口自身. if(self==top){//}判断窗口是否处于顶级 if(self==parent){}//也可以 2.1.父页面访问子页面元素.思路是子页面的元素都在其window.document对象里面,先获取它然后就好说了. 帧最好设置name属性,这样操作最方

  • javascript父子页面通讯实例详解

    本文实例讲述了javascript父子页面通讯的实现方法.分享给大家供大家参考.具体分析如下: 如果一个domain为 www.abc.com的页面内部包含一个name属性值为childFrame的iframe,并且这个iframe的domain为 static.abc.com.那么可以通过设置父页面的domain为abc.com,子页面的domain也为abc.com,然后实现父子页面通讯(我这里有点混淆父子页面和跨域的概念. 不采用上面的方法也是可以实现父子页面相互访问的. 方法是:在父页面

  • 微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解 上面一张图是编辑款项页面,下面一张图是点击了编辑款项页面中选择好友的图标后打开的子页面.这个时候点选子页面的某个好友时,需要把好友的名字传递回编辑款项父页面. 采取的方法: 从页面路由栈中直接获取和操作目标Page对象,这种方式,是通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,我们可以很容易的获取到上一级页面的完整Page对象,从而使直接调用Page对象的属

  • javascript 中的继承实例详解

    javascript 中的继承实例详解 阅读目录 原型链继承 借用构造函数 组合继承 寄生组合式继承 后记 继承有两种方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法. 由于函数没有签名,在ECMAScript中无法实现接口继承.ECMAScript只支持实现继承,而且实现继承主要依靠原型链来实现. 下面介绍几种js的继承: 原型链继承 原型链继承实现的本质是重写原型对象,代之以一个新类型的实例.代码如下: function SuperType() { this.pr

  • javascript常用经典算法实例详解

    javascript常用经典算法实例详解

    本文实例讲述了javascript常用算法.分享给大家供大家参考,具体如下: 入门级算法-线性查找-时间复杂度O(n)--相当于算法界中的HelloWorld //线性搜索(入门HelloWorld) //A为数组,x为要搜索的值 function linearSearch(A, x) { for (var i = 0; i < A.length; i++) { if (A[i] == x) { return i; } } return -1; } 二分查找(又称折半查找) - 适用于已排好序的

  • JavaScript中Dom操作实例详解

    本文实例讲述了JavaScript中Dom操作.分享给大家供大家参考,具体如下: 博主将按照增删改查的方式来介绍一下Dom的主要操作. 1.增加节点 添加节点的操作主要分为3步: (1)创建要添加的新节点 (2)找到要添加到的父节点 (3)父节点添加新节点 参考代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Com

  • JavaScript设计模式之观察者模式实例详解

    JavaScript设计模式之观察者模式实例详解

    本文实例讲述了JavaScript设计模式之观察者模式.分享给大家供大家参考,具体如下: 观察者模式 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己. * 它分为2个角色:(1)观察者  (2)被观察者 * 观察者模式的目的:对程序的内在变化进行观察,当其有变化的时候,你可以得知,并且可以做出相应的反应. 现在我们通过一个需求来学习该

  • JavaScript错误处理操作实例详解

    本文实例讲述了JavaScript错误处理操作.分享给大家供大家参考,具体如下: 良好的错误处理机制可以让用户得到及时的提醒,所以让我们来看看 JavaScript 提供了哪些针对错误处理的工具和方法吧O(∩_∩)O~ 1 try-catch 语句 ECMA-262 第 3 版引入了 try-catch 语句,这时 JavaScript 处理异常的标准方式: try{ //可能会导致错误的代码 } catch (error){ //错误处理 } 如果 try 块中的代码发生了错误,会立即执行 c

  • JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】

    本文实例讲述了JavaScript 变量,数据类型基础.分享给大家供大家参考,具体如下: 这篇笔记呢,咱记录下变量和数据类型的基础知识,因为两者有联系 所以放在一起记录 1 如何声明变量 变量声明使用var关键字,下面举一些变量声明的例子: <!DOCTYPE html> <html> <head> <title>learn javascript</title> </head> <body> </body> {

  • javascript防篡改对象实例详解

    本文实例讲述了javascript防篡改对象.分享给大家供大家参考,具体如下: JavaScript中对象内置有多个属性Configurable,Writable,Enumerable,Value,Get和Set,来控制属性的行为.同样的ES5也有几个方法,来指定对象的行为.我们知道,javascript中的对象是可以共享的,也是默认可拓展的: //一旦将对象设置防篡改,就不能撤销了 //众所周知,一般的对象是可以随意拓展的 var person = {name:'liufang'}; pers

  • javascript原型模式用法实例详解

    本文实例讲述了javascript原型模式用法.分享给大家供大家参考.具体分析如下: 一般在了解了工厂模式和构造函数模式的弊端之后,就知道为什么需要原型模式了   原型模式i的定义:每个函数都有一个prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法.比如在构造函数模型中sayInformation()方法,如果声明两个实例就要构造两次sayInformation方法,但是声明两次是没有必要的,这就是为什么有原型模式的出现(尼玛,网上那些博客

随机推荐