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

四种方式

一般情况下，我们可以使用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--714--Card Trick

    /* Name: NYOJ--714--Card Trick Author: shen_渊 Date: 19/04/17 19:35 Description: 早上训练的第六届河南省程序设计大赛的题, ...

  2. this final 关键字

    this: 1:将当前对象的值返回(谁调用就指谁). 2:添加this关键字可以区分局部变量和成员变量. 3:使用this可以调用其他构造函数(前提是this正处于构造函数中). final: 1:修 ...

  3. Handler案例-简易打地鼠游戏（延时处理消息）

    1. 游戏思路 (1)用ImageView显示地鼠,初始状态将ImageView设置为不可见状态.当开始游戏后,通过sendMessageDelayed()方法延时发送消息,使ImageView显示出 ...

  4. centos7安装mysql（yum）

    centos7安装mysql(yum) ----安装环境----依赖安装----检查mysql是否已安装----安装----验证是否添加成功----选择要启用的mysql版本----通过Yum安装my ...

  5. 在App Store中无法更新xcode 8.3.2时 以及更新新系统10.12

    今天更新Xcode 遇到三个坑坑1 要想更新Xcode最新版本 需要先把电脑系统更新到10.12 坑2 电脑系统更新到10.12 需要更新Mac Sierra 就可以了坑3 在App Store中下载 ...

  6. IntelliJ IDEA Windows下Spark开发环境部署

    0x01 环境说明 本地 OS: windows 10 jdk: jdk1.8.0_121 scala: scala-2.11.11 IDE: IntelliJ IDEA ULTIMATE 2017. ...

  7. HTML5之dir属性

    <p style="text-align:center"><bdo dir="RTL">芙蓉楼送辛渐</bdo></p ...

  8. 前后端分离（手）-- 使用mock.js（好样的）

    ## 前言: 本篇博文昨天七夕写的,一天下来被虐得体无完肤,苦逼的单身狗只能学习,对!我爱学习,关掉朋友圈,并写了一篇博文发泄发泄.这次写mock.js的使用,能使前后端分离,分离,分离,重要的是说三 ...

  9. Android学习之旅（一）

    2017-02-27 今天开始,正式开启Android学习之旅,背景从事.Net平台开发快五年了,一直在用C#做Web开发. 前天选购了两本书:<Java 编程思想(第四版)>和<第 ...

  10. (转)没有IE就没有伤害！浏览器兼容性问题解决方案汇总

    普及:浏览器的兼容性问题,往往是个别浏览器(没错,就是那个与众不同的浏览器)对于一些标准的定义不一致导致的.俗话说:没有IE就没有伤害. 贴士:内容都是自己总结的,不免会出现错误或者bug,欢迎更正和 ...