資訊專欄INFORMATION COLUMN
摘要：于是關(guān)鍵詞求助百度，給出的答案要不說是的問題，要不是說客戶端的問題，都嘗試了一下，發(fā)現(xiàn)一點(diǎn)用處都沒有。但是仍然有點(diǎn)奇怪，也是使用，后來回憶，在換百度這個(gè)鏈接之前殺了一次進(jìn)程，應(yīng)該是這個(gè)因素導(dǎo)致的。
寫在前面
最近接手了一個(gè)古舊的項(xiàng)目，跟客戶端、服務(wù)器端一起調(diào)一個(gè)支付相關(guān)的app內(nèi)嵌H5頁面，這個(gè)頁面有兩部分組成，主頁面A加上一個(gè)最終支付頁面B，B頁面是通過iframe嵌入到A頁面中的，A、B兩個(gè)頁面之間的交互采用postMessage+hashChange。
一般除了下載之類的需求，我很少在自己的項(xiàng)目中使用iframe，像這樣的兩個(gè)頁面切換的問題，第一反應(yīng)都是分開寫的，不會(huì)使用iframe套在一起。
因?yàn)轫?xiàng)目代碼比較老了，我也不太敢動(dòng)，主要還是在上面修修補(bǔ)補(bǔ)，基本邏輯理通之后，我在自己的安卓測試機(jī)上調(diào)試了一番，一路通順，完全沒有問題。我把訪問鏈接給到客戶端，讓他試一下，客戶端反映，B頁面出不來。
可是在我手機(jī)上明明是好的啊，怎么突然顯示不出來了呢。
第一反應(yīng)，有的手機(jī)可以，有的手機(jī)不行，是不是代碼哪里有兼容性問題。
我用有問題的手機(jī)打開線上的支付頁面，發(fā)現(xiàn)沒有任何問題，兩個(gè)支付頁面是共用代碼的，排除了兼容性問題，一定是在代碼上出了錯(cuò)。
然而當(dāng)時(shí)我基本上沒在原有的代碼上加什么功能性代碼，一時(shí)也理不出頭緒。
在代碼里加調(diào)試工具，看見有幾個(gè)js的ajax網(wǎng)絡(luò)請(qǐng)求一直pending，長時(shí)間pending之后就failed了，這個(gè)倒是好解決，反正是靜態(tài)資源，我直接放在頁面里面，或者script標(biāo)簽引入就行了，照做之后，之前有問題的js倒是引入進(jìn)來了，接著又發(fā)現(xiàn)iframe的onload也沒有執(zhí)行，可是調(diào)試工具上沒有報(bào)錯(cuò)。
我對(duì)iframe是相當(dāng)?shù)钟|的，平時(shí)也沒有花時(shí)間去好好了解一下它，它的onload無法執(zhí)行，當(dāng)下我是一點(diǎn)想法都沒有的。
于是關(guān)鍵詞求助百度，給出的答案要不說是css的問題，要不是說客戶端webview的問題，都嘗試了一下，發(fā)現(xiàn)一點(diǎn)用處都沒有。
我把iframe的src換成了http://www.baidu.com，可以加載。
再換回去我們的鏈接，還是不行，將app殺個(gè)進(jìn)程，再進(jìn)去訪問，突然就可以了，不同安卓版本的手機(jī)嘗試了一下，也沒發(fā)現(xiàn)這個(gè)現(xiàn)象跟安卓高低版本之間有什么必然的關(guān)系，甚至部分手機(jī)有時(shí)候可以加載，有時(shí)候又不可以。
完全無規(guī)律。
之前我都是在客戶端webview里面加調(diào)試工具看的，我突然想起，調(diào)試工具提供的信息有限，不如試一下在chrome中訪問看一下。
chrome里面依然顯示iframe的onload沒有執(zhí)行，但是這時(shí)候終于出現(xiàn)了一行報(bào)錯(cuò)，顯示“Mixed Content……This request has been blocked; the content must be served over HTTPS”。
原來https和http混用，http請(qǐng)求會(huì)被block掉，我回頭看了一下，我訪問A頁面的時(shí)候是使用的https協(xié)議，但是B頁面的iframe使用的是http協(xié)議，所以被瀏覽器直接block掉了，導(dǎo)致onload無法執(zhí)行。
我再將線上那個(gè)可以運(yùn)行的支付頁面的鏈接拿來一看，人家使用的是http協(xié)議！
我的天爺，坑原來在這里等著我，我萬萬沒想到，一個(gè)https竟然引起了這么大的麻煩。不止這個(gè)iframe，那幾個(gè)通過ajax請(qǐng)求的js也是同樣的問題，都是因?yàn)槭褂玫氖莌ttp，所以被block掉了。
原因找到，迅速解決，在客戶端的手機(jī)上終于順利展示。
但是仍然有點(diǎn)奇怪，http://www.baidu.com也是使用...，后來回憶，在換百度這個(gè)鏈接之前殺了一次進(jìn)程，應(yīng)該是這個(gè)因素導(dǎo)致的。
1.我之前很喜歡混用https和http，沒什么具體的依據(jù)，想到https就使用https，想到http就用http（因?yàn)槲覀兊馁Y源兩種協(xié)議都支持），這一不留意就給自己挖了個(gè)巨坑。
2.iframe + postMessage很好的解決了兩個(gè)頁面?zhèn)髦档膯栴}，可以不借助后端(這樣就少了幾個(gè)后端接口，且也少了中途被劫持篡改的風(fēng)險(xiǎn))，直接跨域傳遞，這個(gè)特性在本次頁面中發(fā)揮了很大的作用，非常好用。
3.我以后再也再也不排斥iframe了，它的作用大大的。
4.贊美chrome，報(bào)錯(cuò)信息來的太是時(shí)候了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106853.html
摘要：公司有個(gè)需求就是要在前端生成圖片首先想到的是用生成圖片，自己畫這也太耗時(shí)間了吧后面在上一查有個(gè)的框架可以用這里附上地址使用起來也特別簡單，官網(wǎng)是這么描述的如果你要配置一些參數(shù)可以在傳入的后面進(jìn)行傳參官網(wǎng)文檔可查官網(wǎng)文檔我自己的工程環(huán)境是會(huì) 公司有個(gè)需求就是要在前端生成圖片首先想到的是用canvas生成圖片，自己畫這也太耗時(shí)間了吧！后面在npm上一查有個(gè)html2canvas的框架可以用...
摘要：公司有個(gè)需求就是要在前端生成圖片首先想到的是用生成圖片，自己畫這也太耗時(shí)間了吧后面在上一查有個(gè)的框架可以用這里附上地址使用起來也特別簡單，官網(wǎng)是這么描述的如果你要配置一些參數(shù)可以在傳入的后面進(jìn)行傳參官網(wǎng)文檔可查官網(wǎng)文檔我自己的工程環(huán)境是會(huì) 公司有個(gè)需求就是要在前端生成圖片首先想到的是用canvas生成圖片，自己畫這也太耗時(shí)間了吧！后面在npm上一查有個(gè)html2canvas的框架可以用...
摘要：公司有個(gè)需求就是要在前端生成圖片首先想到的是用生成圖片，自己畫這也太耗時(shí)間了吧后面在上一查有個(gè)的框架可以用這里附上地址使用起來也特別簡單，官網(wǎng)是這么描述的如果你要配置一些參數(shù)可以在傳入的后面進(jìn)行傳參官網(wǎng)文檔可查官網(wǎng)文檔我自己的工程環(huán)境是會(huì) 公司有個(gè)需求就是要在前端生成圖片首先想到的是用canvas生成圖片，自己畫這也太耗時(shí)間了吧！后面在npm上一查有個(gè)html2canvas的框架可以用...
摘要：如果在內(nèi)嵌頁面未載入完成時(shí)，給出一種加載提示信息。載入?yún)^(qū)域給出友好的提示信息當(dāng)載入完成時(shí)，清空提示信息，而讓顯示這些都比較容易，但現(xiàn)在的問題的關(guān)鍵是怎么監(jiān)聽元素內(nèi)的頁面已經(jīng)載入完成。 經(jīng)常會(huì)遇到這樣一種情景： 在iframe里嵌入另外一個(gè)頁面時(shí)。如果iframe載入的頁面響應(yīng)較快，或許我們感覺不到頁面載入的不同步，但試想，如果一個(gè)需要內(nèi)嵌到iframe里的頁面的響應(yīng)很慢，這里會(huì)出現(xiàn)...
閱讀 3670·2021-10-11 10:58
閱讀 2255·2021-10-08 10:05
閱讀 2040·2021-09-27 13:34
閱讀 3583·2019-08-30 15:53
閱讀 2738·2019-08-30 14:02
閱讀 3574·2019-08-29 16:55
閱讀 628·2019-08-29 15:41
閱讀 1077·2019-08-29 15:23
