当前第2页 返回上一页
但是在页面里面嵌入iframe之后却直接就跳转了,大家可以尝试一下面的代码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!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)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!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>
|
结果果然成功了,会出现提示是否离开此页面,点击留下按钮。成功没有跳转。下图为我成品图片。
大功告成,里面可以正常聊天和传文件,但是不能截图。
缺点不足的就是,完成登陆需要点击弹窗取消按钮,而且需要两次,第一次打开页面,第二次扫码结束后还会跳转一次页面。目前还没办法解决这个问题,希望有办法解决此问题的朋友们可以提点建议。
相关推荐:
原生ajax和iframe框架实现图片文件上传的两种方式
PHP利用iframe实现图片上传显示
利用JQuery操作iframe父页面、子页面方法总结
以上就是HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版详解的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
如何解决html打开乱码问题
html怎么去掉li的点
html首行缩进怎么设置
html怎么使文字加阴影
html中表格tr的td单元格怎么设置宽度属性
html中div标签、section标签和acticle标签三者有啥区别
在html里用css隐藏div的方法
html标记分为哪两种
利用html+css+js实现简单的点赞效果
html figcaption标签怎么用
更多相关阅读请进入《iframe》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版详解