HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版

昨天看到这篇文章[置顶]开源组件NanUI一周年 - 使用HTML/CSS/JS来构建.Net Winform应用程序界面

就想弄一个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来阻止跳转。所以在页面加入如下代码:

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         };

然后发现结果还是这样:

到底是什么原因呢?事件没反应?还是微信网页版的跳转太牛了?直接无视这个事件?于是我新建一个空白的html,单独加上该事件进行验证。

 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>

结果却是可行的:

但是在页面里面嵌入iframe之后却直接就跳转了,大家可以尝试一下面的代码。

 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>

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

 

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

缺点不足的就是,完成登陆需要点击弹窗取消按钮,而且需要两次,第一次打开页面,第二次扫码结束后还会跳转一次页面。目前还没办法解决这个问题,希望有办法解决此问题的朋友们可以提点建议哈~~

好了,第一次写博客到此结束哈哈,写的不好请大家见谅哈哈。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369468.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Spring Data Redis进行缓存

在下面的示例中&#xff0c;我将向您展示如何使用Spring Data – Redis项目作为Spring 3.1中引入的Spring Cache Abstraction的缓存提供程序。 我对如何使用Spring的基于Java的配置有很多疑问&#xff0c;因此我将同时提供基于XML和Java的配置供您查看。 依存关系 在此示例中使…

标准模板库(STL)学习指南之set集合

set是关联容器。其键值就是实值&#xff0c;实值就是键值&#xff0c;不可以有重复&#xff0c;所以我们不能通过set的迭代器来改变set的元素的值&#xff0c;set拥有和list相同的特性&#xff1a;当对他进行插入和删除操作的时候&#xff0c;操作之前的迭代器依然有效。当然删…

搜狗语料库数据整编

1 #!/bin/bash2 if [ -z "$1" ] ; then3 echo "请指定输入目录"4 exit 15 elif [ ! -d $1 ] ; then6 echo "[$1]不是一个合法的输入路径"7 exit 18 fi9 if [ -z "$2" ] ; then 10 echo "请指定输出目录" 11 exi…

linux oracle swd.oui,centos7安装oracle11g报错,请问怎么解?

centos7安装oracle11g报错&#xff0c;请问怎么解&#xff1f;在centos7下安装oracle11g到85%时报错提示Error in invoking target install of makefile ins_ctxm.mk查了log提示如下INFO: Start output from spawned process:INFO: ----------------------------------INFO:INF…

CSS布局技巧之——各种居中

居中是我们使用css来布局时常遇到的情况。使用css来进行居中时&#xff0c;有时一个属性就能搞定&#xff0c;有时则需要一定的技巧才能兼容到所有浏览器&#xff0c;本文就居中的一些常用方法做个简单的介绍。 注&#xff1a;本文所讲方法除了特别说明外&#xff0c;都是兼容…

OpenJPA:内存泄漏案例研究

本文将提供完整的根本原因分析详细信息以及解决影响Oracle Weblogic Server 10.0生产环境的Java堆内存泄漏&#xff08;Apache OpenJPA泄漏&#xff09;的方法。 这篇文章还将演示在管理javax.persistence.EntityManagerFactory生命周期时遵循Java Persistence API最佳实践的重…

了解真实的rem手机屏幕适配

rem 作为一个低调的长度单位&#xff0c;由于手机端网页的兴起&#xff0c;在屏幕适配中得到重用。使用 rem 前端开发者可以很方便的在各种屏幕尺寸下&#xff0c;通过等比缩放的方式达到设计图要求的效果。 rem 的官方定义『The font size of the root element.』&#xff0c;…

JDBC查询Oracle全部表名称,如何使用JDBC API从Oracle数据库中的现有表中检索记录?...

您可以使用UPDATE查询来更新/修改表中记录的现有内容。使用此功能&#xff0c;您可以更新表的所有记录或特定记录。语法UPDATE table_nameSET column1 value1, column2 value2...., columnN valueNWHERE [condition];要使用JDBC API更新表中记录的内容&#xff0c;您需要-注…

JUnit与EasyMock合作

开发人员始终需要注意所产生的代码。 在实施新功能或修复某些错误之后&#xff0c;应确保它们能够正常工作。 至少可以借助单元测试来实现。 由于此博客致力于Java编程语言&#xff0c;因此今天我将撰写有关JUnit 4.1和EasyMock 3. 1框架的文章。 这些框架的主要目的是简化单元…

nodejs获取当前url和url参数值

//需要使用的模块 http url 当前url http://localhost:8888/select?aa001&bb002 var http require(http); var URL require(url); http.createServer(function(req, res){var arg url.parse(req.url).query; //方法一arg > aa001&bb002var arg url.parse(…

以A表中的值快速更新B表中记录的方法

1、问题描述 有两张表&#xff0c;A表记录了某些实体的新属性&#xff0c;B表记录了每个实体的旧属性&#xff0c;现在打算用A中的属性值去更新B中相同实体的旧属性&#xff0c;如下图所示&#xff1a; 类似这样的需求&#xff0c;怎样做比较高效呢&#xff1f; 2、制作模拟数…

linux日志文件备份,LINUX 自动备份程序日志(shell)

定期备份脚本案列用tar压缩7天前日志删除7天压缩完日志删除压缩完356天前日志#&#xff01;/bin/bash#delete expire log#script name drop_log#script default remove 7 day log and remove remove archived a year ago#make date 2015/06/15result_clientfind /orafile/app/s…

HTML 网页创建

最简单的方式就是创建一个文本文档&#xff0c;然后将.txt后缀改为.html或者htm。 完成上面的步骤会创建一个完全空白的网页&#xff0c;下面填充一点内容&#xff0c;代码实例如下: <!DOCTYPE html> <html> <head> <meta charset" utf-8">…

Hadoop赠品–综述

各位极客&#xff0c; Packt Publishing关于Apache Hadoop 的书籍赠品已经结束。 您可以在此处找到比赛的原始帖子。 获奖者 将会获得这本书奖的6位幸运获奖者是&#xff08;姓名出现在他们的电子邮件中&#xff09;&#xff1a; Hadoop真实世界解决方案手册 Sellamuthu&…

企业级应用与互联网应用的区别

企业级应用&#xff1a;商业组织、大型企业而创建并部署的解决方案及应用。涉及的外部资源众多、事务密集、数据量大、用户众多、同时必须有较强的安全性考虑。 企业应用和互联网应用从根本来说是相同的&#xff0c;都是基于因特网、HTTP、浏览器的一种应用&#xff0c;但面向的…

hdu-2602 Bone Collector

题目 http://acm.hdu.edu.cn/showproblem.php?pid2602 分析 基础背包问题,有一个容量为V的背包,各种骨头有大小和价值两种属性,求背包能装的骨头的最大价值. AC代码 #include "bits/stdc.h" using namespace std; int val[1010], vol[1010], dp[1010]; int main(int…

linux vfs open函数,Linux VFS中open系统调用实现原理

用户空间的函数在内核里面的入口函数是sys_open通过grep open /usr/include/asm/unistd_64.h查找到的#define __NR_open2__SYSCALL(__NR_open, sys_open)观察unistd_64.h&#xff0c;我们可以猜测用户空间open函数最终调用的系统调用号是2来发起的sys_open系统调用(毕竟glibc一…

从如何停掉 Promise 链说起

在使用Promise处理一些复杂逻辑的过程中&#xff0c;我们有时候会想要在发生某种错误后就停止执行Promise链后面所有的代码。 然而Promise本身并没有提供这样的功能&#xff0c;一个操作&#xff0c;要么成功&#xff0c;要么失败&#xff0c;要么跳转到then里&#xff0c;要么…

JAXB教程–入门

注意&#xff1a;请查看我们的Java XML绑定JAXB教程– ULTIMATE指南 什么是JAXB&#xff1f; JAXB代表用于XML绑定的Java体系结构。它用于将XML转换为java对象&#xff0c;并将java对象转换为XML。JAXB定义了一个用于在XML文档中读写Java对象的API。与SAX和DOM不同&#xff0c…

《Kubernetes权威指南第2版》学习(二)一个简单的例子

1&#xff1a; 安装VirtualBox, 并下载CentOS-7-x86_64-DVD-1708.iso&#xff0c; 安装centOS7,具体过程可以百度。 2&#xff1a;开启centOS的SSH&#xff0c; 步骤如下&#xff1a; &#xff08;1&#xff09; yum list installed | grep openssh-server查看是否已经安装了SS…