白云岛资源网 Design By www.pvray.com

就想弄一个winform结合html5的一个小东西,突有兴致,想在里面嵌套一个微信网页版。

好了,想法一出来,就行动吧,最终效果如下图:

HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法

一开始就打算在页面里面嵌套一个iframe指向https://wx.qq.com就OK了,但是我还是太天真,微信网页版会自动跳转。结果如下图:

HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法

于是上网搜了一下阻止iframe跳转的办法,就是在iframe标签加上security="restricted"sandbox="" 两个属性。前者是IE的禁止js的功能,后者是HTML5的功能。

使用sandbox="allow-scripts allow-same-origin allow-popups"可以阻止跳转。然而......结果却是这样:

HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法

然后发现,这个跳转其实就是关闭原先页面之后在浏览到跳转页面。所以可以利用页面关闭事件onbeforeunload来阻止跳转。所以在页面加入如下代码:

 document.body.onbeforeunload = function (event) {
             var rel = "asdfawfewf";
             if (!window.event) {
                event.returnValue = rel;
            } else {
                window.event.returnValue = rel;
             }
         };

然后发现结果还是这样:

HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法

到底是什么原因呢?事件没反应?还是微信网页版的跳转太牛了?直接无视这个事件?于是我新建一个空白的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>

结果却是可行的:

HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法

但是在页面里面嵌入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>

正在毫无计策的时候,我一直打开关闭尝试该方法是否生效。突然发现,如果页面在刚打开的很短时间内关闭页面,onbeforeunload事件是不会被触发的,在等待几秒之后再关闭页面就会触发事件出现提示。

来,试一下iframe延时对src赋值(这里引用了JQuery)。

<!DOCTYPE html>
  <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <meta charset="utf-8" />
     <title></title>
      <script src="scripts/jquery-2.2.3.js"></script>
  </head>
  <body>
      <iframe id="iframe" frameborder="0" style="position: absolute;border: navajowhite;left: 0;height: calc(100% - 30px);width:100%">
     </iframe>
 </body>
 <script>
 $(function () {
     setTimeout(function () {
         iframe.src = "https://wx.qq.com/";
     },5000);
 });
 document.body.onbeforeunload = function (event) {
     var rel = "asdfawfewf";
     if (!window.event) {
         event.returnValue = rel;
     } else {
         window.event.returnValue = rel;
     }
 };
 </script>
 </html>

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

HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法

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

HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法

缺点不足的就是,完成登陆需要点击弹窗取消按钮,而且需要两次,第一次打开页面,第二次扫码结束后还会跳转一次页面。目前还没办法解决这个问题,希望有办法解决此问题的朋友们可以提点建议哈~~小编会及时回复大家的,在此也非常感谢大家对网站的支持!

白云岛资源网 Design By www.pvray.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
白云岛资源网 Design By www.pvray.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。