就想弄一個(gè)winform結(jié)合html5的一個(gè)小東西，突有興致，想在里面嵌套一個(gè)微信網(wǎng)頁(yè)版。

好了，想法一出來(lái)，就行動(dòng)吧，最終效果如下圖：

一開(kāi)始就打算在頁(yè)面里面嵌套一個(gè)iframe指向https://wx.qq.com就OK了，但是我還是太天真，微信網(wǎng)頁(yè)版會(huì)自動(dòng)跳轉(zhuǎn)。結(jié)果如下圖：

于是上網(wǎng)搜了一下阻止iframe跳轉(zhuǎn)的辦法，就是在iframe標(biāo)簽加上security= restricted sandbox= 兩個(gè)屬性。前者是IE的禁止js的功能，后者是HTML5的功能。

使用sandbox= allow-scripts allow-same-origin allow-popups 可以阻止跳轉(zhuǎn)。然而......結(jié)果卻是這樣：

然后發(fā)現(xiàn)，這個(gè)跳轉(zhuǎn)其實(shí)就是關(guān)閉原先頁(yè)面之后在瀏覽到跳轉(zhuǎn)頁(yè)面。所以可以利用頁(yè)面關(guān)閉事件onbeforeunload來(lái)阻止跳轉(zhuǎn)。所以在頁(yè)面加入如下代碼：

 document.body.onbeforeunload = function (event) { var rel = asdfawfewf  if (!window.event) { event.returnValue = rel; } else { window.event.returnValue = rel; };

然后發(fā)現(xiàn)結(jié)果還是這樣：

到底是什么原因呢？事件沒(méi)反應(yīng)？還是微信網(wǎng)頁(yè)版的跳轉(zhuǎn)太牛了？直接無(wú)視這個(gè)事件？于是我新建一個(gè)空白的html，單獨(dú)加上該事件進(jìn)行驗(yàn)證。

 !DOCTYPE html  html lang= en xmlns= http://www.w3.org/1999/xhtml  head  meta charset= utf-8 /  title /title  /head  body /body  script document.body.onbeforeunload = function (event) { var rel = asdfawfewf  if (!window.event) { event.returnValue = rel; } else { window.event.returnValue = rel; /script  /html 

結(jié)果卻是可行的：

但是在頁(yè)面里面嵌入iframe之后卻直接就跳轉(zhuǎn)了，大家可以嘗試一下面的代碼。

 !DOCTYPE html  html lang= en xmlns= http://www.w3.org/1999/xhtml  head  meta charset= utf-8 /  title /title  /head  body  iframe src= /uploads/allimg/190522/134523OJ-6.jpg frameborder= 0 >
正在毫無(wú)計(jì)策的時(shí)候，我一直打開(kāi)關(guān)閉嘗試該方法是否生效。突然發(fā)現(xiàn)，如果頁(yè)面在剛打開(kāi)的很短時(shí)間內(nèi)關(guān)閉頁(yè)面，onbeforeunload事件是不會(huì)被觸發(fā)的，在等待幾秒之后再關(guān)閉頁(yè)面就會(huì)觸發(fā)事件出現(xiàn)提示。
來(lái)，試一下iframe延時(shí)對(duì)src賦值(這里引用了JQuery)。
 !DOCTYPE html  html lang= en xmlns= http://www.w3.org/1999/xhtml  head  meta charset= utf-8 /  title /title  script src= scripts/jquery-2.2.3.js /script  /head  body  iframe id= iframe frameborder= 0 >
結(jié)果果然成功了，會(huì)出現(xiàn)提示是否離開(kāi)此頁(yè)面，點(diǎn)擊留下按鈕。成功沒(méi)有跳轉(zhuǎn)。下圖為我成品圖片。
大功告成，里面可以正常聊天和傳文件，但是不能截圖。
缺點(diǎn)不足的就是，完成登陸需要點(diǎn)擊彈窗取消按鈕，而且需要兩次，第一次打開(kāi)頁(yè)面，第二次掃碼結(jié)束后還會(huì)跳轉(zhuǎn)一次頁(yè)面。目前還沒(méi)辦法解決這個(gè)問(wèn)題，希望有辦法解決此問(wèn)題的朋友們可以提點(diǎn)建議。
相關(guān)推薦：
原生ajax和iframe框架實(shí)現(xiàn)圖片文件上傳的兩種方式
PHP利用iframe實(shí)現(xiàn)圖片上傳顯示
利用JQuery操作iframe父頁(yè)面、子頁(yè)面方法總結(jié)
以上就是HTML阻止iframe跳轉(zhuǎn)頁(yè)面并使用iframe在頁(yè)面內(nèi)嵌微信網(wǎng)頁(yè)版詳解的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。