ShowModalDialog常见的几个问题
文中涉及的三个页面:main.htm、form.html、target.html
1、mian.html——要显示模式窗口的页面,只有一个“显示窗口的链接”
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Main </TITLE>
<script type="text/javascript">
function openWin(){
window.showModalDialog("form.html","","dialogWidth=300px;dialogHeight=200px");
}
</script>
</HEAD>
<BODY>
<a href="javascript:openWin();">显示窗口</a>
</BODY>
</HTML>
2、form.html——显示在模式窗口中的页面,主要包含一个表单
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Form </TITLE>
</HEAD>
<BODY>
<form action="target.html" method="get">
<input type="text" name="keyword" />
<input type="submit" value="SUBMIT" />
</form>
</BODY>
</HTML>
3、target.html——form.html页面中表单的action指向的页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Target </TITLE>
</HEAD>
<BODY>
<h2>表单提交目标页面</h2>
</BODY>
</HTML>
下面基于以上三个页面讨论遇到的三个问题
问题一:表单无法提交
打开main.html页面然后点击链接可以正常弹出模式窗口,但是在模式窗口中点击SUBMIT按钮却无法提交表单。
解决方法:
在form.html页面中的<HEAD></HEAD>中间添加<base target="_self">标签。
问题二:传值到模式窗口
现在有了新的需求,在form.html页面中需要显示main.html页面中的内容,也就是说需要传值给form.html页面。
解决方法:
1、修改main.html中的openWin方法,如下:
function openWin(){
var obj = {"name":"FCGK","age":22,"address":"河北省"};
window.showModalDialog("form.html",obj,"dialogWidth=300px;dialogHeight=200px");
}
2、在form.html页面中接受并显示
添加JS代码(在页面加载完成后,获取传递的值并显示):
<script type="text/javascript">
window.onload=function(){
var obj = window.dialogArguments;
if(obj != null){
document.getElementById("divInfo").innerHTML = "Name:"+obj.name+"<br/>"+"Age:"+obj.age+"<br/>"+"Address:"+obj.address;
}
}
</script>
添加HTML代码(用来显示传递过来的内容):
<div id="divInfo"></div>
通过以上修改,实现了传值给form.html页面。这是传递多个值的方法,如果你只需传递一个值那就更简单了不需要我多说了。从这个问题中我们可以看出showModalDialog 的第二个参数可以是一个对象,那么你也可以把当前的window对象传递过去,剩下的怎么做看你自己的了。
问题三:获取模式窗口返回值
又有一个需要实现的功能就是关闭模式窗口后主窗口需要知道操作的结果,或是根据操作结果判断是否需要刷新主页面。
解决方法:
1、修改form.html页面,添加如下HTML代码:
<a href="javascript:window.returnValue='任务完成';window.close();">点击关闭窗口并返回值</a>
2、修改main.html中的openWin方法,如下:
function openWin(){
var obj = {"name":"FCGK","age":22,"address":"河北省"};
var result = window.showModalDialog("form.html",obj,"dialogWidth=300px;dialogHeight=200px");
if(result != undefined){
alert("返回值为:"+result);
}
}
主要通过window.returnValue实现返回值,在main.html中用var result = window.showModalDialog的方法获取返回值,需要注意的是showModalDialog方法形成一个阻塞,方法不返回下面的代码不会执行。
相关推荐
ShowModalDialog父窗体向子窗体传值
Javascript 两个窗体之间传值实现代码javascript中还有一个函数window.showModalDialog也可以打开一个新窗体,不过他打开的是一个模态窗口,那么如何在父窗体和子窗体之间传值呢?我们先看该函数的定义:...
window.showModalDialog以及window.open用法简介
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口,其实解决方法很简单如下。
解决三层或心上showModalDialog的问题_2
This is a `window.showModalDialog()` shim using a modal HTML5 `<dialog>` element and ECMAScript 6 Generators. It was tested in the latest Google Chrome with the *Enable Experimental JavaScript* flag ...
解决三层或心上showModalDialog的问题_js
javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例代码。
window.showModalDialog以及window.open用法简介 父子窗口传值
div层实现showModalDialog
showModalDialog参数传递和获
JS 弹出对话框window.showModalDialog,级联方式,可以返回传值给页面
showModalDialog和showModelessDialog使用心得
showModalDialog参数详解 基本介绍: showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。 window.showModelessDialog()...
网上找了好几个小时没有找到解决办法。最终还是自己解决了。...... 比如在index.htm首页中加入了..... newslist.asp的列表链接是用showModalDialog弹出窗口做的:...... 这样做就是用超链接把返回url转递到用...
解决谷歌浏览器37+版本window.showModalDialog方法失效问题,最终版本。 10分你值得拥有
做项目时,碰到了前台页面需要向弹出框传值并且需要使用弹出框的返回值的需要,一开始使用的prompt(); 发现ie浏览器时,prompt()弹出框的位置会固定在左上角。后来使用window.showModalDialog(url,params,pos)方法 ...
Selenium目前没有提供对IE模态对话框(即通过showModalDialog方法打开的弹出对话框)的处理。原因在于,模态对话框会将父页面的 JS挂起,直至对话框处理完毕才会继续执行父页面JS。因为Selenium的底层实现是基于JS的,...
解决三层或心上showModalDialog的问题