`
keron
  • 浏览: 30933 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

ShowModalDialog常见的几个问题——表单提交、传值、反馈

 
阅读更多

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 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中,`showModalDialog`是一个用于打开模态对话框的方法,主要应用于IE浏览器,从版本4开始支持。模态对话框意味着用户必须关闭该对话框才能与父窗口进行交互。相反,`showModelessDialog`则创建一个非...

    用showModalDialog弹出页面后,提交表单总是弹出一个新窗口

    然而,当在使用`showModalDialog`弹出的页面中包含一个表单并尝试进行提交时,有时会遇到一个常见的问题:表单提交操作反而会打开一个新的浏览器窗口,这显然不是我们期望的行为。 为了解决这个问题,我们可以采用...

    Javascript showModalDialog两个窗体之间传值

    Javascript 两个窗体之间传值实现代码javascript中还有一个函数window.showModalDialog也可以打开一个新窗体,不过他打开的是一个模态窗口,那么如何在父窗体和子窗体之间传值呢?我们先看该函数的定义:...

    C#实现父子窗体全传值案例

    以上就是在C#中使用`ShowModalDialog`实现父子窗体之间全传值的常见方法。实际开发中,你可以根据具体需求选择合适的方式。在这个案例中,可能涉及到了其中的一种或多种技术,通过`OpenForm`这个文件来实现具体的...

    父子窗口传值window.showModalDialog以及window.open用法简介

    window.showModalDialog以及window.open用法简介

    showModalDialog和showModelessDialog使用心得

    例如,在表单提交前的确认对话框,或者一个登录界面,都是使用模态对话框的好例子。 语法结构为: ```javascript window.showModalDialog(url, arguments, features); ``` - `url` 参数表示新窗口加载的文档地址。 ...

    showModalDialog技术文章

    在IT行业中,`showModalDialog`是一个非常特殊的浏览器API,主要用于弹出模态对话框,它在网页应用中起到了展示信息、获取用户输入或者执行特定任务的作用。这篇名为"showModalDialog技术文章"的博客文章可能详细...

    showModalDialog

    "showModalDialog"是JavaScript中的一个古老但仍然有用的弹出窗口方法,用于在浏览器环境中打开一个新的对话窗口。这个方法在Web开发中主要用于创建模态对话框,即那些阻止用户与页面其余部分交互直到对话框被关闭的...

    showModalDialog参数使用详解

    在JavaScript的世界里,`showModalDialog`是一个古老但仍然有用的函数,用于打开一个模态对话框,展示用户需要交互的信息。这个功能在处理用户输入、确认操作或展示详细信息时非常实用。本篇文章将深入探讨`...

    解决三层或心上showModalDialog的问题_2

    解决三层或心上showModalDialog的问题_2

    window.showModalDialog模式对话框和 window.open的区别

    `window.open`的主要用途是创建新的浏览器窗口或标签页,通常用于链接或表单提交的重定向。它也支持返回一个`Window`对象,你可以通过这个对象来操作新窗口,如关闭窗口或修改窗口的大小。 总结一下,`window....

    解决window.showModalDialog跨域返回值

    2. 目标站点通过修改`iframe`的`src`属性或提交表单等方式与主页面通信。 3. 主页面通过URL参数接收目标站点返回的值,并关闭`showModalDialog`弹出的窗口。 这个方法巧妙地绕过了跨域限制,实现了跨域`...

    google不支持window.showModalDialog问题解决方案

    This is a `window.showModalDialog()` shim using a modal HTML5 `&lt;dialog&gt;` element and ECMAScript 6 Generators. It was tested in the latest Google Chrome with the *Enable Experimental JavaScript* flag ...

    解决三层或心上showModalDialog的问题_js

    解决三层或心上showModalDialog的问题_js

    showModalDialog跨域解决例子

    要解决`showModalDialog`的跨域问题,我们可以采取以下几种方法: 1. **CORS(Cross-Origin Resource Sharing)**:这是一种现代浏览器支持的机制,允许服务器通过设置特定的HTTP头(如`Access-Control-Allow-...

    使用selenium测试showModalDialog模态对话框

    `showModalDialog` 是一个古老的浏览器API,用于创建模态对话框,它会阻塞页面的JavaScript执行,直到对话框关闭。由于 Selenium 的执行依赖于JavaScript,因此在模态对话框打开时,Selenium 无法与对话框交互,导致...

    showModalDialog参数传递和获

    在JavaScript中,`showModalDialog`是一个古老的浏览器API,用于打开一个模态对话窗口,它在用户与对话框交互之前阻止了对父窗口的访问。这个API在现代Web开发中已经逐渐被淘汰,但由于某些老旧系统的存在,理解其...

    showModalDialog用法

    `showModalDialog`是早期Internet Explorer浏览器中提供的一个用于创建模态对话框的方法。它能够阻止用户与当前页面的其他部分交互,直到对话框被关闭为止。本文将详细介绍`showModalDialog`的用法及其参数传递方式...

Global site tag (gtag.js) - Google Analytics