HTML阻止iframe跳轉頁面並使用iframe在頁面內嵌微信網頁版，iframe跳轉

最後更新：2018-01-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

HTML阻止iframe跳轉頁面並使用iframe在頁面內嵌網頁版，iframe跳轉
昨天看到這篇文章[置頂]開源組件NanUI一周年 - 使用HTML/CSS/JS來構建.Net Winform應用程式介面

就想弄一個winform結合html5的一個小東西，突有興緻，想在裡面嵌套一個網頁版。

好了，想法一出來，就行動吧，最終效果如：

一開始就打算在頁面裡面嵌套一個iframe指向https://wx.qq.com就OK了，但是我還是太天真，網頁版會自動跳轉。結果如：

於是上網搜了一下阻止iframe跳轉的辦法，就是在iframe標籤加上 security="restricted" sandbox="" 兩個屬性。前者是IE的禁止js的功能，後者是HTML5的功能。

使用 sandbox="allow-scripts allow-same-origin allow-popups"可以阻止跳轉。然而......結果卻是這樣：

然後發現，這個跳轉其實就是關閉原先頁面之後在瀏覽到跳轉頁面。所以可以利用頁面關閉事件onbeforeunload來阻止跳轉。所以在頁面加入如下代碼：

1 document.body.onbeforeunload = function (event) {2             var rel = "asdfawfewf";3             if (!window.event) {4                 event.returnValue = rel;5             } else {6                 window.event.returnValue = rel;7             }8         };

然後發現結果還是這樣：

到底是什麼原因呢？事件沒反應？還是網頁版的跳轉太牛了？直接無視這個事件？於是我建立一個空白的html，單獨加上該事件進行驗證。

 1 <!DOCTYPE html> 2  3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5     <meta charset="utf-8" /> 6     <title></title> 7 </head> 8 <body></body> 9 <script>10 document.body.onbeforeunload = function (event) {11     var rel = "asdfawfewf";12     if (!window.event) {13         event.returnValue = rel;14     } else {15         window.event.returnValue = rel;16     }17 };18 </script>19 </html>

結果卻是可行的：

但是在頁面裡面嵌入iframe之後卻直接就跳轉了，大家可以嘗試一下面的代碼。

 1 <!DOCTYPE html> 2  3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5     <meta charset="utf-8" /> 6     <title></title> 7 </head> 8 <body> 9     <iframe src="https://wx.qq.com/" frameborder="0" style="position: absolute;border: navajowhite;left: 0;height: calc(100% - 30px);width:100%">10     </iframe>11 </body>12 <script>13 document.body.onbeforeunload = function (event) {14     var rel = "asdfawfewf";15     if (!window.event) {16         event.returnValue = rel;17     } else {18         window.event.returnValue = rel;19     }20 };21 </script>22 </html>

正在毫無計策的時候，我一直開啟關閉嘗試該方法是否生效。突然發現，如果頁面在剛開啟的很短時間內關閉頁面，onbeforeunload事件是不會被觸發的，在等待幾秒之後再關閉頁面就會觸發事件出現提示。

來，試一下iframe延時對src賦值(這裡引用了JQuery)。

 1 <!DOCTYPE html> 2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4     <meta charset="utf-8" /> 5     <title></title> 6     <script src="scripts/jquery-2.2.3.js"></script> 7 </head> 8 <body> 9     <iframe id="iframe" frameborder="0" style="position: absolute;border: navajowhite;left: 0;height: calc(100% - 30px);width:100%">10     </iframe>11 </body>12 <script>13 $(function () {14     setTimeout(function () {15         iframe.src = "https://wx.qq.com/";16     },5000);17 });18 document.body.onbeforeunload = function (event) {19     var rel = "asdfawfewf";20     if (!window.event) {21         event.returnValue = rel;22     } else {23         window.event.returnValue = rel;24     }25 };26 </script>27 </html>

結果果然成功了，會出現提示是否離開此頁面，點擊留下按鈕。成功沒有跳轉。為我成品圖片。

大功告成，裡面可以正常聊天和傳檔案，但是不能。

缺點不足的就是，完成登陸需要點擊彈窗取消按鈕，而且需要兩次，第一次開啟頁面，第二次掃碼結束後還會跳轉一次頁面。目前還沒辦法解決這個問題，希望有辦法解決此問題的朋友們可以提點建議哈~~

好了，第一次寫部落格到此結束哈哈，寫的不好請大家見諒哈哈。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More