window.showModalDialog 与window.open传递参数的不同?
简单的说,就是一个在弹出窗口之后可以做其它的事,即window.open
另一个在弹出窗口之后不能做其它的事,只能是关闭了当前的窗口之后才能做其它的事,即window.showModalDialog
那么两者在使用上有什么不同呢?他们分别是如何和父窗口进行交互的呢?
先来看window.showModalDialog的例子:
我这里现在有一个父窗体parent.jsp,它里面有一个方法
function openChild(){
var temp = window.showModalDialog("child.jsp",window,'dialogWidth=400px;dialogHeight=200px');
document.getElementById("fromChildName").value = temp.childName;
document.getElementById("fromChildAge").value = temp.childAge;
}
这里面,我们第二个参数传递为window,也就是把当前页面做为参数传递到子窗口中,temp 为子窗口的返回值
再来看子窗口child.jsp页面:
function fromParent(){
var parName = window.dialogArguments.document.getElementById("parName").value; //得到父窗口中的姓名
var parAge = window.dialogArguments.document.getElementById("parAge").value
document.getElementById("fromParName").value = parName;
document.getElementById("fromParAge").value = parAge;
}
从上面我们就可以看出,在父窗口中我们传递了window这个参数,然后在子窗口中,我们用window.dialogArguments直接到取了父窗口中id = "parName"的属性值
再来说这个返回值temp是怎么回事?
function toParent(){
var obj = new Object();
obj.childName = document.getElementById("childName").value;
obj.childAge = document.getElementById("childAge").value;
window.returnValue = obj;
window.close();
}
我们用window.returnValue的方式直接把一个对象返回到父窗口,然后父窗口根据对象中的属性直接取出其中的值就OK了
那么,我们可不可以直接调用父窗口中的方法呢?
答案是肯定的:
function fromParentFunction(){
window.dialogArguments.parFunction();
}
我们用window.dialogArguments + 父窗口的方法名,就直接可以调用父窗口的方法
上面是window.showModalDialog如何来进行子父窗口间的传递值,那么,接下来看下window.open是如何进行子父窗口间的传值:
在父窗口parent.jsp页面中:
function openChild(){
var obj = window;
obj.name = "张三";
obj.age = "18";
window.open('child.jsp','我是弹出子窗口','height=200,width=400,top=200,left=400,toolbar=no,menubar=no,
scrollbars=no, resizable=no,location=no, status=no');
}
我们定义变量obj = window,再通过属性赋值把对象传递过去,接下来看下子窗口:
function fromParent(){
alert("得到父窗口的中姓名值:"+ this.opener.name);
alert("得到父窗口中的年龄值:"+ this.opener.age);
}
利用this.opener.属性名 就可以得到父窗口中的变量值
那么如何把值子窗口中的值再返回到父窗口中呢?
function toParent(){
//把子窗口中的值传递给父窗口,document.getElementById("name").value得到子窗口的值
this.opener.document.getElementById("parName").value = document.getElementById("childName").value;
this.opener.document.getElementById("parrAge").value = document.getElementById("childAge").value;
window.close();
}
这里的parName是父窗口中的id = 'parName' ,也就是说,可以在子窗口中利用 this.opener. + 父窗口元素 赋值给父窗口
window.showModalDialog 与window.open传递参数的不同?的更多相关文章
- window.showModalDialog与window.open()使用
window.showModalDialog 有些浏览器不兼容,尝试用window.open() 封装替代,需要打开子窗口后向父窗口传递数据. <html> <script src= ...
- window.open、window.showModalDialog和window.showModelessDialog 的区别[转]
一.前言 要打开一个可以载入页面的子窗口有三种方法,分别是window.open.window.showModalDialog和window.showModelessDialog. open方法就是打 ...
- window.showModalDialog以及window.open用法简介
.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象.例如:------------------------------parent.htm<script& ...
- window.showModalDialog的基本用法
window.showModalDialog的基本用法 showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.show ...
- window.showModalDialog
//新版本谷歌没有window.showModalDialog,创建一个window.openif(window.showModalDialog == undefined){ window.show ...
- window.showModalDialog()之返回值
window.showModalDialog的基本用法 showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.show ...
- window.open || window.showModalDialog || window.showModelessDialog
http://dwcmayday201204063551.iteye.com/blog/1621751 http://www.cnblogs.com/zhangyi85/archive/2009/09 ...
- javascript window.showModalDialog不兼容goole解决方案
window.showModalDialog不兼容goole解决方案 一.弹框方案: 1.window.open; 2.window.showModalDialog; 3.div制作窗口:(本节忽略) ...
- window.parent与window.opener、window.showModalDialog的区别 opener和showModalDialog刷新父页面的方法
项目中使用案例: 父窗体 <s:form namespace="/forexagent" id="listSearchForm" name="t ...
随机推荐
- 从cocos2dx中寻找函数指针传递的方法
目的 看到群里有个朋友搞了好几天函数指针传递,没搞好.所以写一篇文章,旨在从cocos2dx中帮朋友们找到如何传递指针. 旧版本的函数指针传递 全局函数函数指针调用 一般在C++11之前,我们一般是这 ...
- (转)MFC消息机制
转自:http://blog.csdn.net/kongfuxionghao/article/details/35882533
- 时间日期Date类型
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- Hybrid App简介
Hybrid App 是混合模式应用的简称,兼具 Native App 和 Web App 两种模式应用的优势,开发成本低,拥有Web技术跨平台特性.目前大家所知道的基于中间件的移动开发框架都是采用的 ...
- java多线程之 Executors线程池管理
1. 类 Executors 此类中提供的一些方法有: 1.1 public static ExecutorService newCachedThreadPool() 创建一个可根据需要创建新线程的线 ...
- Mapreduce执行过程分析(基于Hadoop2.4)——(二)
4.3 Map类 创建Map类和map函数,map函数是org.apache.hadoop.mapreduce.Mapper类中的定义的,当处理每一个键值对的时候,都要调用一次map方法,用户需要覆写 ...
- nodejs save遇到的一个坑
混合类型因为没有特定约束,因此可以任意修改,一旦修改了原型,则必须 调用markModified() >>> person.anything = {x:[3,4,{y:'change ...
- air 移动开发配置文件详解
转自http://www.badyoo.com/index.php/2012/09/12/208/index.html 目录 所需的 AIR 运行时版本 应用程序标识 应用程序版本 主应用程序 SWF ...
- cocos2d-html5在cocos2d-x里面打包编译
main.cpp打开USE_WIN32_CONSOLE输出 #include "main.h" #include "AppDelegate.h" #includ ...
- dom 学习的开始~简单留言1
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...