父子页面相互调用是一个在开发中经常遇到的问题，但是没有找到过比较全面的文章介绍。在此总结下来，供大家参考。

四种方式

一般情况下，我们可以使用iframe、window的open、showModalDialog、showModelessDialog方法这四种方式打开一个子窗口。(showModalDialog、showModelessDialog是IE独有的。)

下面分这四种方式来讨论如何父子页面互相调用。

分情况讨论

iframe

在这种情况下，子页面直接通过parent.var就可以对父页面的变量和方法进行操作。

父页面可以通过拿到iframe的contentWindow对象来访问子页面的window。

父页面代码，文件名为iframe.html。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>

</head>

<body>

<script>

var testVar = "我是父窗口测试变量";

var childFrame;

function getChildVar(){

var childFrame = document.getElementById("childFrame");

var childWindow = childFrame.contentWindow

alert(childWindow.testVar);

}

</script>

<iframe id="childFrame" name="childFrame" frameBorder="0" src="iframe.child.html" style="border:1px solid black;">

</iframe>

<br />

<button onclick="getChildVar();">拿到子页面的变量</button>

</body>

</html>

子页面代码，文件名为iframe.child.html。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>

</head>

<body>

<script>

var testVar = "我是子窗口测试变量";

</script>

我是在IFrame中的子窗体。

<button onclick="alert(parent.testVar);">拿到父页面的testVar</button>

</body>

</html>

open

使用window.open打开的子页面，在子页面中可以通过window.opener来访问父页面的window对象。

在父页面中，可以通过window.open方法的返回值拿到子页面的window，就可以操作子页面的变量和方法。

父页面代码，文件名为window.open.html。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>window.open父页面</title>

</head>

<body>

<script>

var testVar = "我是父窗口测试变量";

var childFrame;

function openWindow(){

childFrame = window.open("window.open.child.html");

}

function getChildVar(){

alert(childFrame.testVar);

}

</script>

<button onclick="openWindow();">使用window.open打开子页面</button>

<button onclick="getChildVar();">拿到子页面的变量</button>

</body>

</html>

子页面代码，文件名为window.open.child.html。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>window.open子页面</title>

</head>

<body>

<script>

var testVar = "我是子窗口测试变量";

alert(window.opener.testVar);

</script>

</body>

</html>

showModalDialog

使用showModalDialog打开的子页面，如果想访问父页面的window，需要在执行showModalDialog方法的时候，把父页面的window当作参数传递过去。见父页面的代码。

因为showModalDialog是阻塞的，父页面的代码在子页面不关闭之前无法继续执行，所以只能通过returnValue拿到子页面的变量，见子页面的代码。

父页面代码，文件名为ShowModalDialog.html。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>ShowModalDialog父页面</title>

</head>

<body>

<script>

var testVar = "我是父窗口测试变量";

function openDialog(){

var testVar = showModalDialog("ShowModalDialog.Child.html",window);

alert(testVar);

}

</script>

<button onclick="openDialog();">OpenDialog</button>

</body>

</html>

子页面代码，文件名为ShowModalDialog.Child.html。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>ShowModalDialog子页面</title>

</head>

<body>

<script>

var testVar = "我是子窗口测试变量";

function getParent(){

var parentWindow = window.dialogArguments;

alert(parentWindow.testVar);

}

function closeMe(){

returnValue = testVar;

window.close();

}

</script>

我是使用ShowModalDialog打开的子页面。

<br />

<button onclick="getParent()">getParent</button>

<button onclick="closeMe()">closeMe</button>

</body>

</html>

showModelessDialog

使用showModelessDialog打开的子页面，同样需要在执行方法的时候，把父页面的window当作参数传递过去。

但不同之处在于showModelessDialog会直接返回子页面的window对象，不是阻塞的，可以直接对子页面的方法和变量进行访问。

父页面代码，文件名为ShowModelessDialog.html：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>ShowModalDialog父页面</title>

</head>

<body>

<script>

var testVar = "我是父窗口测试变量";

function openDialog(){

var childWindow = showModelessDialog("ShowModelessDialog.Child.html",window);

alert(childWindow.testVar);

}

</script>

<button onclick="openDialog();">OpenDialog</button>

</body>

</html>

子页面代码，文件名为ShowModelessDialog.html。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>ShowModalDialog子页面</title>

</head>

<body>

<script>

var testVar = "我是子窗口测试变量";

function getParent(){

var parentWindow = window.dialogArguments;

alert(parentWindow.testVar);

}

function closeMe(){

returnValue = testVar;

window.close();

}

</script>

我是使用ShowModalDialog打开的子页面。

<br />

<button onclick="getParent()">getParent</button>

<button onclick="closeMe()">closeMe</button>

</body>

</html>
 
 

JavaScript 父子页面相互调用总结的更多相关文章

  1. JQuery javascript实现父子页面相互调用

    javascript实现父子页面相互调用 By:授客 QQ:1033553122 场景1 父页面调用子页面 如上图,在iframe子页面的<script>元素中,定义了taskStatus ...

  2. iframe父子页面相互调用方法，相互获取元素

    父页面获取子页面 var childWin = document.getElementById('setIframe').contentWindow;//获取子页面窗口对象 childWin.send ...

  3. ASP.net关于C#代码与javaScript函数的相互调用

    C#代码与javaScript函数的相互调用 问:1.如何在JavaScript访问C#函数?2.如何在JavaScript访问C#变量?3.如何在C#中访问JavaScript的已有变量?4.如何在 ...

  4. Flex父子窗口相互调用

    Flex父子窗口相互调用 1.设计思路 (1)子窗口调用父窗口的方法 (2)子窗口做了修改后,返回父窗口,父窗口调用子窗口函数 2.设计源码 (1)父窗口 ParentWindow.mxml: < ...

  5. Flex父子窗体相互调用

    Flex父子窗体相互调用 1.设计思路 (1)子窗体调用父窗体的方法 (2)子窗体做了改动后,返回父窗体,父窗体调用子窗体函数 2.设计源代码 (1)父窗体 ParentWindow.mxml: &l ...

  6. vue中的父子组件相互调用

    vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...

  7. iframe 父子页面方法调用

    在写代码的时候经常会用到将一个网页嵌入到另一个网页中,w3c也规定了一个标签<iframe>,这个标签本身就支持跨域,而且所有的浏览器都支持 iframe具有以下属性: 1.framebo ...

  8. C++和JavaScript脚本的相互调用

    脚本调用C++相对比较容易,使用ATL组件只需要抛双接口即可,但在exe里如何做到呢?本文实现了在exe里脚本和C++的相互调用.在EXE里也需要对外抛送一个继承自IDispatch的接口.并需要重载 ...

  9. JavaScript父子页面之间的相互调用

    父页面: <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>< ...

随机推荐

  1. 微信小程序（有始有终，全部代码）开发---跑步App+音乐播放器 Bug修复

    开篇语 昨晚发了一篇: <简年15: 微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 > 然后上午起来吃完午饭之后,我就准备继续开工的,但是突然的,想要看B站.然后在一股 ...

  2. POJ-1861-NETWORK 解题报告

    Network Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 16628   Accepted: 6597   Specia ...

  3. Linux Command Line(II): Intermediate

    Prerequisite: Linux Command Line(I): Beginner ================================ File I/O $ cat > a ...

  4. 如何两周达到150行Java程序的能力--part 2

    第一次课训练营课程打通了有C语言编程通往面向对象编程的道路,然而道路依然会曲折.下图是第二次训练营课程的训练大纲,从第二次开始,每次课首先进行测试. 针对作业1的训练要求,明确定义了13个具体的测试点 ...

  5. Oracle数据库 拾漏补缺

    select语句的基本使用 可以查询需要的列,行,可以进行多表链接,连接查询. from p_emp e select 后面跟的是要显示的结果,可以是通过运算或者连接符号得出的伪列 null  空值 ...

  6. Ubuntu 简单安装和配置 GitLab

    使用的 Ubuntu Server 16.04 LTS 版本,服务器托管在 Azure 上,用的 1 元试用 1 个月服务器订阅(1500 元额度). 安装命令(推荐使用): curl -sS htt ...

  7. 三种Join方法

    NESTED LOOP JOIN  (NLJOIN) 对于被连接的数据子集较小的情况,nested loop连接是个较好的选择.nested loop就是扫描一个表,每读到一条记录,就根据索引去另一个 ...

  8. PYTHON：新闻聚合

    这个项目看了有段时间,因为一直没跑通,而且关于NNTP也不是特别理解.这里是转载code123的分析. 原文地址:http://www.code123.cc/1327.html 书中的第四个练习,新闻 ...

  9. 在Android中使用枚举注解而不是枚举

    Enums often require more than twice as much memory as static constants. You should strictly avoid us ...

  10. 遇到local variable 'e' referenced before assignment这样的问题应该如何解决

    问题:程序报错:local variable 'e' referenced before assignment 解决:遇到这样的问题,说明你在声明变量e之前就已经对其进行了调用,定位到错误的地方,对变 ...