dialogarguments使用教程:从入门到精通看这篇!

吉云

今儿个咱来聊聊这个dialogArguments,一开始我看到这玩意儿也是一脸懵逼,啥玩意儿这是?后来捣鼓一番才算弄明白点儿。

记得那是刚接手一个老项目,里面弹窗特别多,各种传值,看得我头都大。后来发现,这项目里好多地方都用这个方法来搞弹窗,然后通过一个叫dialogArguments的属性来传值。

我就纳闷,这啥原理?于是我就去翻翻资料,好家伙,原来这个showModalDialog()可以打开一个模态对话框,啥叫模态?就是说你这弹窗不关,别的地儿你都点不,就这么霸道!

dialogarguments使用教程:从入门到精通看这篇!

然后,这个dialogArguments就是用来给这个弹窗传值的,你可以传个数字,传个字符串,甚至传个对象、数组啥的都行,反正就是你想传啥就传老方便!

实践出真知

光说不练假把式,咱得上手试试才知道真假。我当时就琢磨着,怎么用这玩意儿实现一个简单的传值功能?

  • 第一步,咱得先搞个主页面,就叫它*。
  • 第二步,再来个弹窗页面,就叫*。
  • dialogarguments使用教程:从入门到精通看这篇!

然后,我在*里写个按钮,点一下就弹个窗:


<button onclick="openDialog()">打开弹窗</button>

openDialog()函数具体实现

dialogarguments使用教程:从入门到精通看这篇!


function openDialog() {

var data = { name: "张三", age: 30 };

var result = *("*", data, "dialogWidth:300px;dialogHeight:200px");

if (result) {

alert("弹窗返回的值:" + result);

dialogarguments使用教程:从入门到精通看这篇!

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


<script>

dialogarguments使用教程:从入门到精通看这篇!

var data = *;

alert("接收到的数据:" + * + "," + *);

</script>

在*页面添加一个按钮用于返回数据

dialogarguments使用教程:从入门到精通看这篇!


<button onclick="returnValue()">返回</button>


function returnValue(){

dialogarguments使用教程:从入门到精通看这篇!

* = "这是返回值";

成!一点按钮,弹窗出来,显示“接收到的数据:张三,30”。这就说明,值传过来!

不过后来我发现,这玩意儿好像有点过时,新的浏览器好多都不支持。现在都流行用配合postMessage来搞弹窗和传值,更灵活也更安全。但不管咋说,解一下这个老古董,对理解网页弹窗的原理还是有帮助的。

dialogarguments使用教程:从入门到精通看这篇!

这回实践让我对dialogArguments有更深的认识,也算是解决一个小小的疑惑。以后再遇到类似的问题,咱也能心里有底,不慌不忙!

免责声明:由于无法甄别是否为投稿用户创作以及文章的准确性,本站尊重并保护知识产权,根据《信息网络传播权保护条例》,如我们转载的作品侵犯了您的权利,请您通知我们,请将本侵权页面网址发送邮件到qingge@88.com,深感抱歉,我们会做删除处理。

目录[+]