ShowModalDialog常见的几个问题——表单提交、传值、反馈
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 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$amp;>amp;$lt;/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.οnlοad=function(){
var obj = window.dialogArguments;
if(obj != null){
document.getElementById("divInfo").innerHTML = "Name:"+obj.name+"<br/$amp;>quot;$+"Age:"+obj.age+"<br/$amp;>quot;$+"Address:"+obj.address;
}
}
</script>
添加HTML代码（用来显示传递过来的内容）：
<div id="divInfo"$amp;>amp;$lt;/div>
通过以上修改，实现了传值给form.html页面。这是传递多个值的方法，如果你只需传递一个值那就更简单了不需要我多说了。从这个问题中我们可以看出showModalDialog 的第二个参数可以是一个对象，那么你也可以把当前的window对象传递过去，剩下的怎么做看你自己的了。
问题三：获取模式窗口返回值
又有一个需要实现的功能就是关闭模式窗口后主窗口需要知道操作的结果，或是根据操作结果判断是否需要刷新主页面。
解决方法：
1、修改form.html页面，添加如下HTML代码：
<a 任务完成';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方法形成一个阻塞，方法不返回下面的代码不会执行。
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
