随着互联网技术的不断发展,网页的交互性也越来越强,特别是对话框的出现为网页的交互性带来了极大的便利。不过,在使用对话框时,我们有时需要把数据从父窗口传递给弹出的对话框,或者将对话框中的数据传递给父窗口。这就需要用到dialogArguments了。
1. 什么是dialogArguments?
dialogArguments是一个Javascript中存在于Modal Dialog(模态对话框)中的一个属性。Modal Dialog是指弹出窗口中的一种,它会阻止用户在关闭对话框之前,去执行任何其他在操作系统或者web应用上的操作。如果我们用window.showModalDialog()方法打开一个模态对话框,那么在对话框窗口对象中,我们可以得到对话框的引用,同时也可以使用dialogArguments属性来进行数据传递。
2. dialogArguments的使用
接下来我们以一个实际例子来具体介绍dialogArguments是如何使用的。
首先,在父窗口中,通过window.showModalDialog()方法弹出一个对话框。如下所示:
```
function openWin() {
var retValue = window.showModalDialog("example.html", dialogArguments, "dialogWidth:250px; dialogHeight:300px");
return false;
}
```
在该方法中,第一个参数是需要打开的对话框文件的URL,第二个参数是用来传递数据的,我们需要传递的数据都存储在dialogArguments对象中。这个对象在调用showModalDialog()时将自动初始化。
第三个参数是模态对话框的宽度和高度属性。
然后,在对话框示例中,可以通过以下代码来获取传递的数据:
```
function getWindowArguments () {
if(window.dialogArguments){
if(window.dialogArguments.argName){
alert(window.dialogArguments.argName);
}
}
}
```
在这个方法中,首先检查dialogArguments是否存在,如果存在,则检查传递的参数是否正确。如果正确,则显示传递的参数的值。
3. dialogArguments的浏览器兼容性
在IE中,使用dialogArguments是没有问题的,但是在其他浏览器中使用这个属性就有兼容性问题了。因此,如果需要进行跨浏览器兼容,我们需要使用其他的方法。
4. 其他用于数据传递的方法
由于dialogArguments存在兼容性问题,我们可以使用其他方法进行数据传递。这里介绍两种常见的跨浏览器兼容的方法:
4.1 使用opener
在IE中,可以使用opener来获取父窗口的引用,进而访问父窗口中的变量。如下所示:
```
opener.varName;
```
在其他浏览器中,可以使用window.opener来访问父窗口对象。但需要注意的是,在其他浏览器中使用opener会弹出一个警告框提示用户,有可能会被当做恶意脚本而拦截。
4.2 使用postMessage
postMessage可以在同域名下的两个窗口之间传递字符串信息。其核心是window.postMessage()方法,通过这个方法可以向另一个窗口发送消息并在那里触发onmessage事件。如下所示:
```
window.postMessage(message, targetOrigin, [transfer]);
```
其中,message是传递的消息字符串,targetOrigin是被允许获得消息的目标窗口的域名(如果不确定,可以使用*代替),transfer是可选的,可以是一个数组,包含需要转移所有权的对象。
在其他窗口中,使用如下代码监听onmessage事件并接收消息:
```
window.addEventListener("message", function(event) {
// 接收到的消息在event中
}, false);
```
总结
在使用模态对话框时,我们经常需要在父窗口和对话框之间传递数据。其中,IE支持使用dialogArguments来进行传递,但是其他浏览器并不支持。因此,如果需要进行跨浏览器兼容,可以考虑使用opener或postMessage方法进行数据传递。