html怎么阻止微信跳转页面,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，单独加上该事件进行验证。

10 document.body.οnbefοreunlοad= function(event) {11 varrel= "asdfawfewf";12 if(!window.event) {13 event.returnValue=rel;14 }else{15 window.event.returnValue=rel;16 }17 };18

html怎么阻止微信跳转页面,HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版-站长资讯中心...相关推荐

uni-app实现app内嵌微信文章
目的: 在app内显示微信公众号文章,不采用iframe标签,不采用第三方接口解决方案: 如果是uni-app的框架可以直接使用web-view标签. <template><vie ...
Vue 内嵌微信登录二维码及修改默认样式
1. index.html 引入微信官方提供的js文件 <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/w ...
微信小程序内嵌H5网页
微信小程序内嵌网页 1.登录微信公众平台,选择对应的小程序进入(个人类型的小程序暂不支持使用) 2.在小程序后台左侧菜单选择"开发"–"开发管理"–" ...
微信内嵌H5网页解决js倒计时失效
项目要求:将H5商城页面嵌套到公司微信公众号里项目本身的开发跟移动端网页并无太多差异,只是这昨天遇到一个问题,说是棘手,到也简单. 用户下单后,在选择支付方式页面,有个倒计时的逻辑(从下单时开始计算 ...
微信公众号内嵌h5网页实现微信授权
废话不多说上代码 if(window.location.search){ let str = window.location.search.split("&")[0]. ...
h5唤醒微信支付PHP,app内嵌微信h5支付，支付服务唤起支付处理
app内发起支付,报错net::ERR_UNKNOWN_URL_SCHEME 出错原因:在调微信 H5 支付https://wx.tenpay.com/cgi-bin/mmpayweb-bin/che ...
code标签无法渲染html,【菜鸟笔记】记一次django无法正常在ie和edge浏览器渲染html页面-站长资讯中心...
如图所示,django无法渲染html显示成下载文件了一步一步的从render ==>HttpResponse ==>HttpResponseBase 找到即django文件夹下的ht ...
小程序内嵌h5页面分享_微信小程序webview内页面分享
因为项目原因,之前在微信小程序内部使用 webview 嵌套了 h5 页面,现在要添加一个新的功能,用户在哪个页面进行了分享,被分享的用户从链接进来就跳转到哪个分享页面. 先了解一下 web-view ...
微信小程序和H5之间相互跳转的几种情况
小程序跳转H5 直接通过web-view内嵌的方式,有且只有这一种方式. <web-view :src="url"></web-view> H5跳转小程序 ...

html怎么阻止微信跳转页面,HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版-站长资讯中心...

html怎么阻止微信跳转页面,HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版-站长资讯中心...相关推荐

最新文章

热门文章