今儿个咱来聊聊这个dialogArguments,一开始我看到这玩意儿也是一脸懵逼,啥玩意儿这是?后来捣鼓一番才算弄明白点儿。
记得那是刚接手一个老项目,里面弹窗特别多,各种传值,看得我头都大。后来发现,这项目里好多地方都用这个方法来搞弹窗,然后通过一个叫dialogArguments的属性来传值。
我就纳闷,这啥原理?于是我就去翻翻资料,好家伙,原来这个showModalDialog()可以打开一个模态对话框,啥叫模态?就是说你这弹窗不关,别的地儿你都点不,就这么霸道!
然后,这个dialogArguments就是用来给这个弹窗传值的,你可以传个数字,传个字符串,甚至传个对象、数组啥的都行,反正就是你想传啥就传老方便!
实践出真知
光说不练假把式,咱得上手试试才知道真假。我当时就琢磨着,怎么用这玩意儿实现一个简单的传值功能?
- 第一步,咱得先搞个主页面,就叫它*。
- 第二步,再来个弹窗页面,就叫*。
然后,我在*里写个按钮,点一下就弹个窗:
<button onclick="openDialog()">打开弹窗</button>
openDialog()函数具体实现
function openDialog() {
var data = { name: "张三", age: 30 };
var result = *("*", data, "dialogWidth:300px;dialogHeight:200px");
if (result) {
alert("弹窗返回的值:" + result);

瞧见没?我给*传个对象过去,里面有名字有年龄。然后在*里,我就可以通过拿到这个对象:
<script>

var data = *;
alert("接收到的数据:" + * + "," + *);
</script>
在*页面添加一个按钮用于返回数据
<button onclick="returnValue()">返回</button>
function returnValue(){

* = "这是返回值";
成!一点按钮,弹窗出来,显示“接收到的数据:张三,30”。这就说明,值传过来!
不过后来我发现,这玩意儿好像有点过时,新的浏览器好多都不支持。现在都流行用配合postMessage来搞弹窗和传值,更灵活也更安全。但不管咋说,解一下这个老古董,对理解网页弹窗的原理还是有帮助的。
这回实践让我对dialogArguments有更深的认识,也算是解决一个小小的疑惑。以后再遇到类似的问题,咱也能心里有底,不慌不忙!