昨天看到這篇文章[置頂]開源組件NanUI一周年 - 使用HTML/CSS/JS來構建.Net Winform應用程式界面 就想弄一個winform結合html5的一個小東西，突有興緻，想在裡面嵌套一個微信網頁版。 好了，想法一齣來，就行動吧，最終效果如下圖： 一開始就打算在頁面裡面嵌套一個ifra ...
昨天看到這篇文章[置頂]開源組件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>
結果果然成功了，會出現提示是否離開此頁面，點擊留下按鈕。成功沒有跳轉。下圖為我成品圖片。
大功告成，裡面可以正常聊天和傳文件，但是不能截圖。
缺點不足的就是，完成登陸需要點擊彈窗取消按鈕，而且需要兩次，第一次打開頁面，第二次掃碼結束後還會跳轉一次頁面。目前還沒辦法解決這個問題，希望有辦法解決此問題的朋友們可以提點建議哈~~
好了，第一次寫博客到此結束哈哈，寫的不好請大家見諒哈哈。
