ShowModalDialog是jswindow对象的一个方法,和window.open打开新页面一样。不同的是:showModalDialog打开子窗口后,父窗口无法获得焦点(即无法操作)。
1.ModalDialog是什么?showModalDialog是jswindow对象的一个方法,和window.open打开新页面一样。不同的是:showModalDialog打开子窗口后,父窗口无法获得焦点(即无法操作)。可以在子窗口中设置window.returnValue的值,这样父窗口就可以获得这个returnValue。
2.一个例子1)主窗口main.html,2)打开子窗口sub.html3)在子窗口中设置returnValue返回主窗口。
main.html代码复制如下:htmlheadmetaname=' generator ' content=' Oscar 999 '/headline function show modal(){ varret=window . show modal dialog(' sub . html?temp=' math . random());alert(' subreturnvalueis ' ret);}/scriptBODYINPUTid=button 1 type=button value=' open sub ' name=button 1 on click=' show modal();/body/html sub . html复制代码,代码如下:htmlheadmetaname=' generator ' content=' Oscar 999 '/headline function return main(){ window . return value=' returnfromsub ';window.close()。}/scriptbodyinputid=button 1 type=button value=' returnandclose ' name=button 1 onclick=' return main()'/body/html特别注意:在main.html中使用showModalDialog方法时,使用Math.random()来避免缓存。
3.showModalDialog详细使用vreturnvalue=window . show modal dialog(surl[,varguments] [,features])surl的必需参数,类型:string。用于指定要在对话框中显示的文档的URL。VArguments可选参数,类型:variant。用于向对话框传递参数。传递的参数类型不限,包括数组等。通过对话框窗口获取传递的参数。对话框参数.sFeatures的可选参数,type: string。用于描述对话框的外观和其他信息,可以使用下列一项或多项,用分号“;”分开。dialogHeight对话框的高度不应小于100px。IE4中dialogHeight和dialogWidth的默认单位是em,而IE5中的默认单位是px。为了方便起见,定义模式对话框时使用px作为单位。对话框的宽度。DialogLeft:桌面左侧的距离。DialogTop:离桌面的距离。居中:{是|否|1|0}:窗口是否居中,默认值为“是”,但仍可指定高度和宽度。帮助:{是|否|1|0}:是否显示“帮助”按钮,默认为“是”。可调整大小:{是|否| 1 | 0} [IE5+]:是否可以调整大小。默认编号状态:{是|否| 1 | 0} [IE5]:是否显示状态栏。默认情况下是[无模式]或[无模式]。Scroll:{yes|no|1|0|on|off}:指示对话框是否显示滚动条。默认情况下是。
还有几个属性在HTA中使用,但一般不在一般网页中使用。DialogHide:{yes|no|1|0|on|off}:打印或打印预览时是否隐藏对话框。默认为否。Edge:{ sinved | raised }:指示对话框的边框样式。默认情况下会引发。未确认:{是|否| 1 | 0 |开|关}:默认情况下为否。
4.浏览器兼容,但并非所有浏览器对都与此用法兼容。如果上面的例子在Chrome中运行,父窗口可以随意获得焦点,效果和window.open一样,获得的returnVale也是未定义的。以下是主流浏览器对这种方式的支持。
浏览器
支持吗?
情况
IE9
零
火狐13.0
零
safari5.1
零
铬19.0
这不是一个模式对话框,而是一个打开的新窗体。
操作12.0
什么都没有发生,甚至没有一扇窗户。
如果传入变量的参数是window,复制代码如下:varret=window . show modal dialog(' sub . html?temp=' Math.random(),window);然后在子窗口中,下列值是:
浏览器
模式对话框
开窗器
window . dialog参数
返回值
IE9
零
不明确的
[对象窗口]
零
火狐13.0
零
[对象窗口]
[对象窗口]
零
safari5.1
零
[对象窗口]
[对象窗口]
零
铬19.0
[对象窗口]
不明确的
注意一下火狐浏览器浏览器下,子窗体假如刷新的话窗户。对话参数照样会丢失,变成未定义。以上结果中我们可以看出返回值返回值就只有铬浏览器返回的是未定义,其他浏览器都没有问题
5.如何解决Chrome的兼容问题。方向是:设置窗户。开场。返回值=' ' main。超文本标记语言复制代码代码如下:HTML HEAD META NAME=' GENERATOR ' Content=' Oscar 999 '/HEAD脚本函数show modal(){ var ret=window。showmodal对话框(' sub。HTML?temp=' Math.random(),window);//对于Chrome if(ret==undefined){ ret=window。返回值;}警报('子返回值为ret’);}/脚本体输入id=button 1 type=button value=' open sub ' name=button 1 onclick=' show modal();/BODY /HTMLsub.html复制代码代码如下:HTML HEAD META NAME=' GENERATOR ' Content=' Oscar 999 '/HEAD脚本函数return main(){ if(window。揭幕战!=未定义){ window。开场。返回值='从sub返回';} else { window。返回值='从sub返回';} window.close()。}/脚本体输入id=button 1 type=button value=' return and close ' name=button 1 onclick=' return main()'/BODY/HTML这里是判断某些对象是否为清晰的来区分浏览器。当然,也可以判断浏览器的类型的方式进行
这里是借用了父窗口的返回值来使用,如果父窗口的返回值也用其他用途是可以使用替换的方式进行了,as:var旧值=窗口。返回值;var new value=showModalDialog()window。返回值=旧值
6.需要特别注意的是,Chrome下的测试需要把html 文件放入到web server(Tomcat,...)下通过http url 访问测试。否则就不成功了。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。