就想弄一个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阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的更多相关文章

  1. react页面内嵌微信二维码 和 自定义样式 以及 微信网页共用unionId问题

    在react页面内嵌“微信二维码”,实现PC端通过微信扫码进行登录.首先去微信开放平台注册一个账号,创建一个网站应用,提交网站备案审核,获取appid和appsecret:其他开发流程根据微信文档来进 ...

  2. javascript iframe跳转问题

    javascript iframe跳转问题如果在iframe里面有要点击跳转最外层的连接 要只能用<pre> <div onclick="parent.location.h ...

  3. Android内嵌网页webview点击其中的链接跳转到我们应用内的Activity

    在一个大的Android项目中,由于客户端来不及更新和实现,经常会内嵌一些网页(在一些大型的互联网公司,PC的产品总是跑在客户端的前面),比如活动页面,通常可以内嵌用html5实现的页面,可以适配手机 ...

  4. 毕设之iframe跳转子页面问题

    我的Django项目中的index.html分为三个层次,head.body.footer.其中body细分为left和right两部分,right的地图是使用iframe嵌入的map.html页面, ...

  5. javascript控制页面（含iframe进行页面跳转）跳转、刷新的方法汇总

    一.JS方式的页面跳转1.window.location.href方式    <script language="JavaScript" type="text/ja ...

  6. JS页面跳转和js对iframe进行页面跳转、刷新

    一.js方式的页面跳转1.window.location.href方式    <script language="JavaScript" type="text/ja ...

  7. session过期跳转到登陆页面并跳出iframe框架的两个方法

    最近在做拦截器,判断用户登录后操作超时,失去权限然后要重新登录,但是用的iframe,返回的登陆页总是在框架中显示,我百度了下,总是只有其中一个方法,现在分享下两种解决方法,希望对你们有帮助: 方法一 ...

  8. iframe中请求页面而session失效时页面跳转问题

    iframe中请求页面而session失效时页面跳转问题 分类: Web2009-12-11 15:01 656人阅读 评论(0) 收藏 举报 sessioniframejsp 有时候做了就忘了,我记 ...

  9. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

随机推荐

  1. C#读取shp文件并获取图形保存到sde要素类中（不使用ESRI的类库，纯c#实现）

    说明:首先要将sde要素类发布成对应的要素服务,通过对要素服务的操作,实现数据在sde要素类中的增删 //向服务器发出请求 public string getPostData(string postS ...

  2. 谈谈Javascript异步代码优化

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 在实际编码中,我们经常会遇到Javascript代码异步执行的场景,比如ajax的调用.定时器的使用 ...

  3. HTTP协议、Ajax请求

    今天这篇文章呢,主要讲的就是关于HTTP协议.Ajax请求以及一些相关的小知识点.虽然内容不算多,可是是很重点的东西~ HTTP协议 1. http:超文本传输协议.简单.快速.灵活.无状态.无连接. ...

  4. Webpack 热部署检测不到文件的变化

    最近在用webpack开发,突然发现热部署检测不到文件的变化,相关webpack的代码并没有发生改变,而且同事们的webpack都是正常的,不能热部署严重影响我的开发效率. 网上查了一下原来 Webp ...

  5. .NET Core使用微软官方类库实现汉字转拼音

    一.NuGet包 拼音:Install-Package SimplifiedChinesePinYinConversion 简体-繁体互转:Install-Package TraditionalChi ...

  6. Jenkins通过Publish over SSH插件实现远程部署

    Jenkins通过Publish over SSH插件实现远程部署 步凑一.配置ssh免秘钥登录 部署详情地址:http://www.cnblogs.com/Dev0ps/p/8259099.html ...

  7. 十八、Hadoop学记笔记————Hbase架构

    Hbase结构图: Client,Zookeeper,Hmaster和HRegionServer相互交互协调,各个组件作用如下: 这几个组件在实际使用过程中操作如下所示: Region定位,先读取zo ...

  8. SSM-Spring-15：Spring中名称自动代理生成器BeanNameAutoProxyCreator

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 名称自动代理生成器:BeanNameAutoProxyCreator 为了更好的测试,我放了俩个接口,俩个实现 ...

  9. python中读写excel并存入mysql

    为了一个突如其来的想法:用python简单解决就好.现在算是把这个项目需要的基础功能坑都填完了.剩下就是AI和数据展示方面的坑了. 今天遇到的坑是: 1.从excel读出的中文是乱码 2.中文写入my ...

  10. JavaScript prototype原型和原型链详解

    用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...