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

本文介绍了如何在HTML5页面中嵌套iframe以加载微信网页版,并防止其自动跳转。通过设置iframe的security和sandbox属性,以及利用onbeforeunload事件阻止跳转,但遇到页面初始化时的跳转问题。解决方案是延迟设置iframe的src属性,通过jQuery的setTimeout函数在页面加载5秒后设置,成功阻止了跳转。尽管登录过程仍存在问题,作者欢迎读者提出改进意见。
摘要由CSDN通过智能技术生成

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值