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>

结果果真成功了，会出现提示是否离开此页面，点击留下按钮。成功没有跳转。下图为我成品图片。

大功告成，里面能够正常聊天和传文件，可是不能截图。

缺点不足的就是，完成登录须要点击弹窗取消按钮，并且须要两次，第一次打开页面，第二次扫码结束后还会跳转一次页面。目前还没办法解决这个问题，但愿有办法解决此问题的朋友们能够提点建议哈~~

好了，第一次写博客到此结束哈哈，写的很差请你们见谅哈哈。