1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > showModalDialog模态对话框的使用详解以及浏览器兼容

showModalDialog模态对话框的使用详解以及浏览器兼容

时间:2018-07-02 18:25:26

相关推荐

showModalDialog模态对话框的使用详解以及浏览器兼容

showModalDialog是jswindow对象的一个方法,和window.open一样都是打开一个新的页面。区别是:showModalDialog打开子窗口后,父窗口就不能获取焦点了(也就是无法操作了)

1.ModalDialog是什么?

showModalDialog是jswindow对象的一个方法,和window.open一样都是打开一个新的页面。

区别是:showModalDialog打开子窗口后,父窗口就不能获取焦点了(也就是无法操作了)。

可以在子窗口中通过设置window.returnValue的值,让父窗口可以获取这个returnvalue.

2.一个例子

1)主窗口main.html,

2)在主窗口中通过showModalDialog的方式打开子窗口sub.html

3)在子窗口中设置returnValue返回给主窗口使用

main.html

复制代码代码如下:

<HTML>

<HEAD>

<METANAME="GENERATOR"Content="oscar999">

</HEAD>

<script>

functionshowmodal()

{

varret=window.showModalDialog("sub.html?temp="+Math.random());

alert("subreturnvalueis"+ret);

}

</script>

<BODY>

<INPUTid=button1type=buttonvalue="opensub"name=button1οnclick="showmodal();">

</BODY>

</HTML>

sub.html

复制代码代码如下:

<HTML>

<HEAD>

<METANAME="GENERATOR"Content="oscar999">

</HEAD>

<script>

functionreturnMain()

{

window.returnValue="returnfromsub";

window.close();

}

</script>

<BODY>

<INPUTid=button1type=buttonvalue="returnandclose"name=button1οnclick="returnMain()">

</BODY>

</HTML>

特别说明:在main.html中showModalDialog的方法时,有使用到Math.random()的目的是避免缓存。

3.showModalDialog详细使用

vReturnValue=window.showModalDialog(sURL[,vArguments][,sFeatures])

sURL

必选参数,类型:字符串。用来指定对话框要显示的文档的URL。

vArguments

可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。

sFeatures

可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。

dialogHeight对话框高度,不小于100px,IE4中dialogHeight和dialogWidth默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。

dialogWidth:对话框宽度。

dialogLeft:距离桌面左的距离。

dialogTop:离桌面上的距离。

center:{yes|no|1|0}:窗口是否居中,默认yes,但仍可以指定高度和宽度。

help:{yes|no|1|0}:是否显示帮助按钮,默认yes。

resizable:{yes|no|1|0}[IE5+]:是否可被改变大小。默认no。

status:{yes|no|1|0}[IE5+]:是否显示状态栏。默认为yes[Modeless]或no[Modal]。

scroll:{yes|no|1|0|on|off}:指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的,在一般的网页中一般不使用。

dialogHide:{yes|no|1|0|on|off}:在打印或者打印预览时对话框是否隐藏。默认为no。

edge:{sunken|raised}:指明对话框的边框样式。默认为raised。

unadorned:{yes|no|1|0|on|off}:默认为no。

4.浏览器兼容

但是并不是所有浏览器对兼容这样的用法。

在Chrome中运行上面的例子的话,父窗口可以任意获取焦点,效果和window.open一样,而且获取的returnVale也是undefined.

以下是各主流浏览器对此方法的支持状况。

如果有传入vArguments这个参数为window的话:

复制代码代码如下:

var ret = window.showModalDialog("sub.html?temp="+Math.random(),window);

则在子窗口中,以下的值为:

注意一下Firefox浏览器下,子窗体假如刷新的话window.dialogArguments照样会丢失,变成undefined。以上结果中我们可以看出返回值returnValue就只有chrome浏览器返回的是undefined,其他浏览器都没有问题

5.如何解决Chrome的兼容问题。

方向是:设置window.opener.returnValue=""

main.html

复制代码代码如下:

<HTML>

<HEAD>

<META NAME="GENERATOR" Content="oscar999">

</HEAD>

<script>

function showmodal()

{

var ret = window.showModalDialog("sub.html?temp="+Math.random(),window);

//for Chrome

if(ret==undefined)

{

ret = window.returnValue;

}

alert("sub return value is "+ret);

}

</script>

<BODY>

<INPUT id=button1 type=button value="open sub" name=button1 οnclick="showmodal();">

</BODY>

</HTML>

sub.html

复制代码代码如下:

<HTML>

<HEAD>

<META NAME="GENERATOR" Content="oscar999">

</HEAD>

<script>

function returnMain()

{

if(window.opener!=undefined)

{

window.opener.returnValue = "return from sub";

}else{

window.returnValue = "return from sub";

}

window.close();

}

</script>

<BODY>

<INPUT id=button1 type=button value="return and close" name=button1 οnclick="returnMain()">

</BODY>

</HTML>

这里是判断某些对象是否为defined来区分浏览器。当然,也可以判断浏览器的类型的方式进行

这里是借用了父窗口的returnValue来使用, 如果父窗口的returnValue也用其他用途是可以使用替换的方式进行了, as:

var oldValue = window.returnValue;

var newValue = showModalDialog()

window.returnValue = oldValue

6.需要特别注意的是,Chrome下的测试需要把html 文件放入到web server(Tomcat,...)下通过http url 访问测试。否则就不成功了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。