url中 斜杠如何传输_如何在父子页面中传输数据(layer)

最近组长给了一个需求, 需要将网址的ie弹窗兼容chrome, 因为这个网址架构实在太老了,有些棘手, 在解决后记录一下自己的解决方案, 方便回顾. 原来代码中用的window.showModalDialog这个方法, 这个方法因为是同步的, chrome认为不安全, 已经过时了, 在chrome中会报错, 因此, 需要找一个异步的替代方法, 我第一时间想到了window.open, 可惜并不好用, 然后在网上找到了layer这个ui框架, 它提供了方便好看的iframe组件. 知道这个, 就可以开始做准备, 一开始直接使用时遇到一些问题, 因为有些子页面是通用页面, 有一些父页面不是, 就导致了必须把全部的showModalDialog换成layer.open, 并且测试也需要很多时间, 无奈之下需要做兼容,保证 无论是在ie或者chrome下都能正常运行, 于是动手写了一个全局方法, 代码部分如下

在图中可以看到, 用try-catch来判断浏览器是否为ie内核, 在chrome下window.showModalDialog.length这行代码是会报错的, 从而转到catch去调用layer.open. 接下来看一下如何调用这个方法, 代码图片如下

我们在改造原来代码时, 把原来的showModalDialog剪贴到end回调中, 并且加一个判断是否是ie, 如果用户使用的是ie浏览器, 代码会执行到try那部分, 那么他就会回到这个回调中, 继续使用这个过时的函数, 并且下面也是同步的将子页面的返回数据进行下一步的操作. 如果用户使用的是谷歌浏览器, 那么代码就会执行到catch那部分, 使用layer.open, 在用户关闭子页面时再回到end回调中, 第二个参数就是子页面返回的数据, js也能拿着数据进行下一步的操作. 到这里, 调用子页面的逻辑是自洽的. 接下来我们需要考虑在子页面返回数据了, 其实也很简单, 原来的子页面是用window.returnValue来返回数据, 我们需要改成以下代码

我们在utils文件中也写了这个兼容方法, 原理是一样的. 解决方案就是这样, 接下来的工作就是无聊的复制粘贴了. 如果你对我写的文章感兴趣, 麻烦动动小手点个赞关注一下, 遇到问题也可以直接私信问我, 我会尽量帮你. 我是vscoderwhy, 一个正在实习的小前端. 我们下篇文章再见.

------------------------------------分割线-----------------------------------

最近发现可以添加一个新功能, 在上面的代码中我们只考虑了将子页面的数据传到父页面, 忽略了怎么把父页面的数据传到子页面, 下面是代码示例图:

首先, 我们在utils这个全局对象中添加一个属性, 用来存储需要传输的数据, 再写一个方法, 从而在父页面中调用这个方法, 把数据传进去.

接着, 我们就可以在子页面中通过utils.indexData拿到这个数据了.