就想弄一個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來阻止跳轉。所以在頁面加入如下代碼：
| document.body.onbeforeunload = function (event) { var rel = "asdfawfewf"; if (!window.event) { event.returnValue = rel; } else { window.event.returnValue = rel; } }; |
然后發現結果還是這樣：
到底是什么原因呢？事件沒反應？還是微信網頁版的跳轉太牛了？直接無視這個事件？于是我新建一個空白的html，單獨加上該事件進行驗證。
| <!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> |
結果卻是可行的：
但是在頁面里面嵌入iframe之后卻直接就跳轉了，大家可以嘗試一下面的代碼。
| <!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> |
