HTML阻止iframe跳轉(zhuǎn)頁面并使用iframe在頁面內(nèi)嵌微信網(wǎng)頁版的實(shí)現(xiàn)方法
我要評論就想弄一個(gè)winform結(jié)合html5的一個(gè)小東西，突有興致，想在里面嵌套一個(gè)微信網(wǎng)頁版。
好了，想法一出來，就行動(dòng)吧，最終效果如下圖：
一開始就打算在頁面里面嵌套一個(gè)iframe指向https://wx.qq.com就OK了，但是我還是太天真，微信網(wǎng)頁版會(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)閉原先頁面之后在瀏覽到跳轉(zhuǎn)頁面。所以可以利用頁面關(guān)閉事件onbeforeunload來阻止跳轉(zhuǎn)。所以在頁面加入如下代碼：
document.body.onbeforeunload = function (event) {
var rel = "asdfawfewf";
if (!window.event) {
event.returnValue = rel;
} else {
window.event.returnValue = rel;
}
};
然后發(fā)現(xiàn)結(jié)果還是這樣：
到底是什么原因呢？事件沒反應(yīng)？還是微信網(wǎng)頁版的跳轉(zhuǎn)太牛了？直接無視這個(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é)果卻是可行的：
但是在頁面里面嵌入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="https://wx.qq.com/" frameborder="0" style="position: absolute;border: navajowhite;left: 0;height: calc(100% - 30px);width:100%">
</iframe>
</body>
<script>
document.body.onbeforeunload = function (event) {
var rel = "asdfawfewf";
if (!window.event) {
event.returnValue = rel;
} else {
window.event.returnValue = rel;
}
};
</script>
</html>
正在毫無計(jì)策的時(shí)候，我一直打開關(guān)閉嘗試該方法是否生效。突然發(fā)現(xiàn)，如果頁面在剛打開的很短時(shí)間內(nèi)關(guān)閉頁面，onbeforeunload事件是不會(huì)被觸發(fā)的，在等待幾秒之后再關(guān)閉頁面就會(huì)觸發(fā)事件出現(xiàn)提示。
來，試一下iframe延時(shí)對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" style="position: absolute;border: navajowhite;left: 0;height: calc(100% - 30px);width:100%">
</iframe>
</body>
<script>
$(function () {
setTimeout(function () {
iframe.src = "https://wx.qq.com/";
},5000);
});
document.body.onbeforeunload = function (event) {
var rel = "asdfawfewf";
if (!window.event) {
event.returnValue = rel;
} else {
window.event.returnValue = rel;
}
};
</script>
</html>
結(jié)果果然成功了，會(huì)出現(xiàn)提示是否離開此頁面，點(diǎn)擊留下按鈕。成功沒有跳轉(zhuǎn)。下圖為我成品圖片。
大功告成，里面可以正常聊天和傳文件，但是不能截圖。
缺點(diǎn)不足的就是，完成登陸需要點(diǎn)擊彈窗取消按鈕，而且需要兩次，第一次打開頁面，第二次掃碼結(jié)束后還會(huì)跳轉(zhuǎn)一次頁面。目前還沒辦法解決這個(gè)問題，希望有辦法解決此問題的朋友們可以提點(diǎn)建議哈~~小編會(huì)及時(shí)回復(fù)大家的，在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了詳解如何在登錄過期后跳出Ifram框架，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起2020-09-10