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

所属分类: HTML/Xhtml / 网页制作 阅读数: 400
收藏 0 赞 0 分享

就想弄一个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>

正在毫无计策的时候,我一直打开关闭尝试该方法是否生效。突然发现,如果页面在刚打开的很短时间内关闭页面,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换肤功能的实现代码

50行代码换5种肤色,包含透明先把代码奉上,自取自用。直接创建html文件,直接粘贴进去就能用,不能用随便骂。<!DOCTYPE html><html lang="en"><head><meta charset=&qu... 查看详情
收藏 0 赞 0 分享

详解HTML中字体使用line-height依然不能垂直居中解决办法

以图片所示的效果为例,显然我们不仅要使“下一步”文本水平居中,还要垂直居中,此时我们写代码如下:<!DOCTYPE html><html><head><meta charset="UTF-8"&... 查看详情
收藏 0 赞 0 分享

html直接引用vue和element-ui的方法

代码如下所示:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <link rel="stylesheet" href=&... 查看详情
收藏 0 赞 0 分享

详解html-webpack-plugin使用

最近在react项目中初次用到了html-webapck-plugin插件,用到该插件的两个主要作用:为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题可以生成创建html入口文件,比如单页面可以生成一个htm... 查看详情
收藏 0 赞 0 分享

html+css 实现图片右上角加删除叉、图片删除按钮

为了纪录下,以后可能用到,有需要的道友也可以用用。不BB,上效果图先 以上就是效果图。 右上角的图片可自己换图片,图片素材我就不放上来了,我就上个代码,挺简单的css和js,初学者应该也看得明白</pre><pre name="code&qu... 查看详情
收藏 0 赞 0 分享

html post请求之a标签的两种用法解析

html post请求之a标签的两种用法举例,具体内容如下:1、使用ajax来发起POST请求HTML代码如下:<a href="https://www.jb51.net/" class="a_post">发起POST请求<... 查看详情
收藏 0 赞 0 分享

浅析HTML 悬浮float的用法

关于float的一些用法左悬浮: float:left; 右悬浮:float:right;float用法float的用途比较广, 这里简单的介绍下集中常有的用法: 在接触到浮动前,我会去设置一些inline-block, block的属性配合着div的镶嵌 去完成页面的排版... 查看详情
收藏 0 赞 0 分享

详解iframe的src指向的内容不刷新的解决办法

问题描述html<iframe id="h5Content" src=""></iframe>js$("#h5Content").attr("src","${h5.u... 查看详情
收藏 0 赞 0 分享

html中dom元素滚动条滚动控制小结详解

不知道大家有没有遇到过这样的需求,在某个 dom 元素中添加新的子元素,然后要求如果新添加的新元素超出容器的范围,那么我们需要自动滚动到新添加的子元素的位置,如下图所示效果:那么接下来我们一边学习一些 dom 元素滚动相关的知识点,一边实现一个上图的效果和一些其他滚动相关的功能。... 查看详情
收藏 0 赞 0 分享

如何为 Element UI 里的 autosize textarea 设置高度

把Element UI里的textarea input设置为autosize之后,文本框的默认高度为33,并不符合设计默认样式在浏览器中查检元素,发现高度是由textarea的height和min-height来控制框内文字的位置是由padding控制尝试直接修改文本框的heig... 查看详情
收藏 0 赞 0 分享
查看更多