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