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

四种方式

一般情况下，我们可以使用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. Spring+SpringMVC+MyBatis+easyUI整合进阶篇(一)设计一套好的RESTful API

    写在前面的话 看了一下博客目录,距离上次更新这个系列的博文已经有两个多月,并不是因为不想继续写博客,由于中间这段时间更新了几篇其他系列的文章就暂时停止了,如今已经讲述的差不多,也就继续抽时间更新< ...

  2. EXT中导出表格中的数据到Excel

    { itemId: 'excel', text: '导出', iconCls: 'btnExportExcel', disabled: false, handler: function () { // ...

  3. MySQL开发指南

    数据库开发是数据库管理系统(DBMS)和数据库应用软件设计研发的总称,数据运维.参与数据库生产环境的问题优化和解决等方面的事宜. 1.关于MySQL数据库 2.搭建MySQL环境 3.入门常用SQL. ...

  4. hibernate exception nested transactions not supported 解决方法

    开启事务之前先判断事务是否已经打开,方法如下: JdbcTransaction tx=(JdbcTransaction) session.beginTransaction(); 改为JdbcTrans ...

  5. java ArrayList 踩坑记录

    做编程的一个常识:不要在循环过程中删除元素本身(至少是我个人的原则).否则将发生不可预料的问题. 而最近,看到一个以前的同学写的一段代码就是在循环过程中删除元素,我很是纳闷啊.然后后来决定给他改掉.然 ...

  6. ArrayList 和Vector ，HashTable和HashMap异同

    相同点: 1.都实现了List接口(List接口继承自Collection接口) 2.有序集合,数据可重复,可按索引号取值(而HashSet无序,不可重复) 不同点: 1.Vector是线程安全的,而 ...

  7. 【NO.6】HTTP请求-配置-POST请求-GET请求

    直接举例来说 :) 例1:URL里面有”&”连接的情况 http://123.456.7.89:8080/aa/bb/cc/?userid=abcd@gmail.com&operati ...

  8. wpf mvvm datagrid DataGridTemplateColumn的绑定无效的可能原因之一！

    昨天在mvvm wpf的开发中遇到一个问题,绑定不起作用,编辑阶段没问题也没有提示找不到对应的绑定,但是在运行之后却不起作用,查了很多资料,说法不一,有些是要删除datagrid的一行,直接绑定del ...

  9. [js高手之路] vue系列教程 - 组件定义与使用上部(7)

    组件是vue框架比较核心的内容,那么什么是组件呢? 通俗点讲:组件是由一堆html, css, javascript组成的代码片段, 作用是为了实现模块的重用 组件的基本用法: <div id= ...

  10. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...