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

四种方式

一般情况下，我们可以使用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. NYOJ--27--dfs--水池数目

    /* Name: NYOJ--27--水池数目 Author: shen_渊 Date: 17/04/17 15:42 Description: 经典dfs水题,,, */ #include<i ...

  2. 利用Java随机，生成随机学生数据

    为模拟向数据库中大量插入学生数据(注:此处应该用PreparedStatement.batchUpdate等批处理提高效率)的情形,通过Java随机来生成学生数据. 一.要生成的学生数据 studen ...

  3. oracle 基础（上）

    sql  语句氛围以下三种类型: dml:Date Manipulation Language 数据操纵语言 DDL:Data Definition Language 数据定义语言 DCL:Data ...

  4. JS正则密码复杂度校验之：至少有多种字符中的其中几种

    概述 续接上文的密码校验要求: 这个需求有两个难点,一,是如何使用正则匹配所有半角英文标点符号,二,是如何验证密码段中在要求的四种(大写字母,小写字母,数字,标点符号)类型中至少存在三种. 第一个难点 ...

  5. mysql阅读收录

    --mysql阅读收录 -----------------2014/07/02 # 复制相关: 1. 解释基于语句的复制中怎样处理functions,triggers,events和auto_incr ...

  6. webgl自学笔记——矩阵变换

    这章主要探讨矩阵,这些矩阵代表了应用在我们场景上的变换,允许我们移动物体.然而在webGL api中并没有一个专门的camera对象,只有矩阵.好消息是使用矩阵来取代相机对象能让webgl在很多复杂动 ...

  7. Android Studio 实用调试技巧

    Android Studio 是个发工具,其自身带调式环境是很强大的,我们要摆脱只会使用Log打印日志的低效的方法,掌握高级调试技巧对每个Android开发者都是很必要的,废话少说,直入正题 调试方式 ...

  8. 如何快速禁用约束 (解决ORA-O2266问题)

    业务场景: 某天truncate大量表时遇到错误ORA-O2266:表中的唯一/主键被启用的外键引用,不想看ER图来禁用大量复杂约束,所以研发了三种套路...   一. 最偷懒套路 如果要一次性导出很 ...

  9. win10 安装 mysql解压版安装步骤

    参考资料:win 10 安装 mysql 5.7 网址:http://blog.sina.com.cn/s/blog_5f39af320102wbk0.html 本文参考上面的网址的教程,感谢作者分享 ...

  10. 【Regular Expression】RE分类及案例

    背景知识 正则表达式分为三类:基础正则表达式.扩展正则表达式.Perl正则表达式(Perl内建) 通俗来说,这三个一个比一个强大,支持的规则匹配字符更多 1.匹配IP ip addr | grep - ...