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

時間 2019-12-10

標籤 html 阻止 iframe 頁面並使內嵌微信網頁欄目 HTML 简体版

原文原文鏈接

昨天看到這篇文章[置頂]開源組件NanUI一週年 - 使用HTML/CSS/JS來構建.Net Winform應用程序界面

就想弄一個winform結合html5的一個小東西，突有興致，想在裏面嵌套一個微信網頁版。html

好了，想法一出來，就行動吧，最終效果以下圖：html5

一開始就打算在頁面裏面嵌套一個iframe指向https://wx.qq.com就OK了，可是我仍是太天真，微信網頁版會自動跳轉。結果以下圖：jquery

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

使用 sandbox="allow-scripts allow-same-origin allow-popups"能夠阻止跳轉。然而......結果倒是這樣：post

而後發現，這個跳轉其實就是關閉原先頁面以後在瀏覽到跳轉頁面。因此能夠利用頁面關閉事件onbeforeunload來阻止跳轉。因此在頁面加入以下代碼：spa

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         };

而後發現結果仍是這樣：rest

究竟是什麼緣由呢？事件沒反應？仍是微信網頁版的跳轉太牛了？直接無視這個事件？因而我新建一個空白的html，單獨加上該事件進行驗證。code

 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>

結果倒是可行的：orm

可是在頁面裏面嵌入iframe以後卻直接就跳轉了，你們能夠嘗試一下面的代碼。xml

 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>