最近組長給了一個需求, 需要將網址的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拿到這個數據了.

總結

以上是生活随笔為你收集整理的url中 斜杠如何传输_如何在父子页面中传输数据(layer)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。