企業微信/政務微信 previewFile方法在有iframe情況下且iOS點擊無效解決方案

問題的現象:

h5 頁面,對同一個附件,有兩個按鈕,本地查看,在線查看。

  1. 本地查看調用的wx.previewFile預覽附件。
  2. 在線查看是用一個彈出的div包含一個全屏的iframe,iframe地址是在線office預覽附件的地址。

針對上面兩個按鈕,頁面打開後,分別點2個按鈕,都能正常響應,說明本地查看的按鈕功能正常。但是在使用中測試下來,在使用以下步驟情況下,previewFile沒有響應:

  1. 點擊本地查看按鈕,可以正常打開,關閉預覽頁面,後退到頁面,(重複此步驟多次都正常打開)。
  2. 再點擊在線查看,正常打開,關閉彈窗
  3. 再點擊本地查看按鈕,沒有響應

注:上述情況只在iOS 有問題,android是沒有問題的。

解決方式

找官方技術支持

遇到這種情況,首先找微信的技術團隊,可惜溝通下來,他們說APP沒有問題,無法支持,讓自己想辦法!!!

(臨時方案) 非官方方案

先給出我的方案
在“在線查看”按鈕點擊打開的div彈窗後,用戶點擊關閉div彈窗時,觸發的事件中,增加以下一段代碼:

// 修復出現iframe後,導致政務微信的接口失效,主動改變url地址,hack下政務微信的接口響應。
window.location.hash = new Date().getTime().toString()

經測試下來,重複問題現象的步驟,問題得以修復。

此方案的思路是

  1. 根據企業微信文檔調用JS方法,不同的url必須要刷新ticket纔可以重新調用,

image.png

  1. 根據上面這個,猜測,雖然我們用div+iframe彈窗沒有刷新url使url地址發生變更,但是在h5裏用過iframe的同學應該知道,在iOS h5裏面有iframe,是會往histroy裏面增加一條記錄的,要驗證這個現象,只要你在頁面放一個iframe,再調用history.back(), 會發現必須調用兩次back纔可以把頁面返回到上一個頁面。
  2. 根據第二點,猜測企業微信的iOS wkwebview監聽了url變化事件,在調用wx.previewFile方法時,會校驗jsticket是不是和當前的url地址一致,因爲iframe的原因,webview以爲iframe裏的src是當前的地址,所以導致調用wx.previewFile驗證失敗,沒有響應(測試是這樣的原因,具體不知道是不是)
  3. 根據第三點猜測,那麼我在關閉iframe彈窗的時候,設置一下location的hash,即url地址後面#xxx內容,來使wkwebview以爲url變化了,重新設置當前wkwebview的url,再調用wx.previewFile時,校驗url正確,所以正常了。

以上的方案是基於黑盒猜測,實際原因不知道是不是,但是解決了目前的問題,當企業微信能修復這個問題後,再採用官方的方案吧。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章