300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版详解

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

时间:2020-08-07 09:39:29

相关推荐

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

web前端|html教程

iframe,HTML,使用

web前端-html教程

winform结合html5能实现什么功能?突有心血来潮,想在里面嵌套一个微信网页版,下面小编给大家介绍下HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法,一起看看吧,希望能帮助到大家。

二手车网程序源码,ubuntu怎么显示中文,爬虫链接是什么,php项目交接,达州seo排名lzw

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

贷款网站平台源码,如何利用ubuntu开发,win10杀tomcat,爬虫项目书,php实现抢购,莆田抖音seo排名优化系统lzw

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

安卓图片旋转动画源码,ubuntu64 box,tomcat5启动失败,书客爬虫,vscode写php,浙江免费seo关键词优化推荐lzw

一开始就打算在页面里面嵌套一个iframe指向就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,单独加上该事件进行验证。

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

结果却是可行的:

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

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

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

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

$(function () {setTimeout(function () { iframe.src = "/";},5000); }); document.body.onbeforeunload = function (event) {var rel = "asdfawfewf";if (!window.event) { event.returnValue = rel;} else { window.event.returnValue = rel;} };

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

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

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

原生ajax和iframe框架实现图片文件上传的两种方式

PHP利用iframe实现图片上传显示

利用JQuery操作iframe父页面、子页面方法总结

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。