编程知识 购物 网址 新闻 笑话 | 软件 日历 阅读 图书馆 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
   -> CSS/HTML/Xhtml -> HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法 -> 正文阅读

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

就想弄一个winform结合html5的一个小东西,突有心血来潮,想在里面嵌套一个微信网页版,下面小编给大家介绍下HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法,一起看看吧
就想弄一个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>

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


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


缺点不足的就是,完成登陆需要点击弹窗取消按钮,而且需要两次,第一次打开页面,第二次扫码结束后还会跳转一次页面。目前还没办法解决这个问题,希望有办法解决此问题的朋友们可以提点建议哈~~小编会及时回复大家的,在此也非常感谢大家对脚本之家网站的支持!
  CSS/HTML/Xhtml 最新文章
HTML页面点击下载文件的两种实现方法
HTML如何在两个div标签中间画一条竖线
Html屏蔽右键菜单和左键划字功能的示例
详解HTML常用的标签中行内元素和块级元素
HTML阻止iframe跳转页面并使用iframe在页面
html+css+js 实现拍照预览上传图片功能
HTML 5.1学习之新增的14项特性与应用示例
验证HTML,CSS以及RSS源是否正确的免费工具
html中br和br/的区别介绍
W3C教程(5):W3C XML 活动
上一篇文章      下一篇文章      查看所有文章
加:2018-01-22 23:32:32  更:2018-01-22 23:32:38 
 
360图书馆 软件开发资料 购物精选 新闻资讯 Chinese Culture 龙发科技 开发 中国文化 阅读网 日历 万年历 2020年8日历
2020-8-15 0:32:47
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  编程知识