国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

iframe onload事件被block的巨坑

darryrzhong / 3061人閱讀

摘要：于是關鍵詞求助百度，給出的答案要不說是的問題，要不是說客戶端的問題，都嘗試了一下，發現一點用處都沒有。但是仍然有點奇怪，也是使用，后來回憶，在換百度這個鏈接之前殺了一次進程，應該是這個因素導致的。

寫在前面

最近接手了一個古舊的項目，跟客戶端、服務器端一起調一個支付相關的app內嵌H5頁面，這個頁面有兩部分組成，主頁面A加上一個最終支付頁面B，B頁面是通過iframe嵌入到A頁面中的，A、B兩個頁面之間的交互采用postMessage+hashChange。
一般除了下載之類的需求，我很少在自己的項目中使用iframe，像這樣的兩個頁面切換的問題，第一反應都是分開寫的，不會使用iframe套在一起。
因為項目代碼比較老了，我也不太敢動，主要還是在上面修修補補，基本邏輯理通之后，我在自己的安卓測試機上調試了一番，一路通順，完全沒有問題。我把訪問鏈接給到客戶端，讓他試一下，客戶端反映，B頁面出不來。
可是在我手機上明明是好的啊，怎么突然顯示不出來了呢。

嘗試方法

第一反應，有的手機可以，有的手機不行，是不是代碼哪里有兼容性問題。
我用有問題的手機打開線上的支付頁面，發現沒有任何問題，兩個支付頁面是共用代碼的，排除了兼容性問題，一定是在代碼上出了錯。
然而當時我基本上沒在原有的代碼上加什么功能性代碼，一時也理不出頭緒。
在代碼里加調試工具，看見有幾個js的ajax網絡請求一直pending，長時間pending之后就failed了，這個倒是好解決，反正是靜態資源，我直接放在頁面里面，或者script標簽引入就行了，照做之后，之前有問題的js倒是引入進來了，接著又發現iframe的onload也沒有執行，可是調試工具上沒有報錯。
我對iframe是相當抵觸的，平時也沒有花時間去好好了解一下它，它的onload無法執行，當下我是一點想法都沒有的。
于是關鍵詞求助百度，給出的答案要不說是css的問題，要不是說客戶端webview的問題，都嘗試了一下，發現一點用處都沒有。
我把iframe的src換成了http://www.baidu.com，可以加載。
再換回去我們的鏈接，還是不行，將app殺個進程，再進去訪問，突然就可以了，不同安卓版本的手機嘗試了一下，也沒發現這個現象跟安卓高低版本之間有什么必然的關系，甚至部分手機有時候可以加載，有時候又不可以。
完全無規律。

解決

之前我都是在客戶端webview里面加調試工具看的，我突然想起，調試工具提供的信息有限，不如試一下在chrome中訪問看一下。
chrome里面依然顯示iframe的onload沒有執行，但是這時候終于出現了一行報錯，顯示“Mixed Content……This request has been blocked; the content must be served over HTTPS”。
原來https和http混用，http請求會被block掉，我回頭看了一下，我訪問A頁面的時候是使用的https協議，但是B頁面的iframe使用的是http協議，所以被瀏覽器直接block掉了，導致onload無法執行。
我再將線上那個可以運行的支付頁面的鏈接拿來一看，人家使用的是http協議！
我的天爺，坑原來在這里等著我，我萬萬沒想到，一個https竟然引起了這么大的麻煩。不止這個iframe，那幾個通過ajax請求的js也是同樣的問題，都是因為使用的是http，所以被block掉了。
原因找到，迅速解決，在客戶端的手機上終于順利展示。
但是仍然有點奇怪，http://www.baidu.com也是使用...，后來回憶，在換百度這個鏈接之前殺了一次進程，應該是這個因素導致的。

總結

1.我之前很喜歡混用https和http，沒什么具體的依據，想到https就使用https，想到http就用http（因為我們的資源兩種協議都支持），這一不留意就給自己挖了個巨坑。
2.iframe + postMessage很好的解決了兩個頁面傳值的問題，可以不借助后端(這樣就少了幾個后端接口，且也少了中途被劫持篡改的風險)，直接跨域傳遞，這個特性在本次頁面中發揮了很大的作用，非常好用。
3.我以后再也再也不排斥iframe了，它的作用大大的。
4.贊美chrome，報錯信息來的太是時候了。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106853.html

相關文章

  • html2canvas在vue下的巨坑

    摘要：公司有個需求就是要在前端生成圖片首先想到的是用生成圖片，自己畫這也太耗時間了吧后面在上一查有個的框架可以用這里附上地址使用起來也特別簡單，官網是這么描述的如果你要配置一些參數可以在傳入的后面進行傳參官網文檔可查官網文檔我自己的工程環境是會 公司有個需求就是要在前端生成圖片首先想到的是用canvas生成圖片，自己畫這也太耗時間了吧！后面在npm上一查有個html2canvas的框架可以用...

    raledong 評論0 收藏0

  • html2canvas在vue下的巨坑

    摘要：公司有個需求就是要在前端生成圖片首先想到的是用生成圖片，自己畫這也太耗時間了吧后面在上一查有個的框架可以用這里附上地址使用起來也特別簡單，官網是這么描述的如果你要配置一些參數可以在傳入的后面進行傳參官網文檔可查官網文檔我自己的工程環境是會 公司有個需求就是要在前端生成圖片首先想到的是用canvas生成圖片，自己畫這也太耗時間了吧！后面在npm上一查有個html2canvas的框架可以用...

    20171112 評論0 收藏0

  • html2canvas在vue下的巨坑

    摘要：公司有個需求就是要在前端生成圖片首先想到的是用生成圖片，自己畫這也太耗時間了吧后面在上一查有個的框架可以用這里附上地址使用起來也特別簡單，官網是這么描述的如果你要配置一些參數可以在傳入的后面進行傳參官網文檔可查官網文檔我自己的工程環境是會 公司有個需求就是要在前端生成圖片首先想到的是用canvas生成圖片，自己畫這也太耗時間了吧！后面在npm上一查有個html2canvas的框架可以用...

    wow_worktile 評論0 收藏0

  • iframe載入完成時的事件監聽與雙滾動條問題

    摘要：如果在內嵌頁面未載入完成時，給出一種加載提示信息。載入區域給出友好的提示信息當載入完成時，清空提示信息，而讓顯示這些都比較容易，但現在的問題的關鍵是怎么監聽元素內的頁面已經載入完成。 經常會遇到這樣一種情景： 在iframe里嵌入另外一個頁面時。如果iframe載入的頁面響應較快，或許我們感覺不到頁面載入的不同步，但試想，如果一個需要內嵌到iframe里的頁面的響應很慢，這里會出現...

    qujian 評論0 收藏0

發表評論

0條評論

darryrzhong

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<