js实现网页防止被iframe框架嵌套及几种location.href的区别
2023-06-13 09:15:04 时间
首先我们了解一下:window.location.href、location.href、self.location.href、parent.location.href、top.location.href他们的区别与联系,简单的说:几种location.href的区别js实现网页被iframe框架功能
"window.location.href"、"location.href"、"self.location.href"是本页面跳转
"parent.location.href"是上一层页面跳转
"top.location.href"是最外层的页面跳转
举个例子说明(如上图):
如果A,B,C,D都是普通页面,D是C的iframe,C是B的iframe,B是A的iframe,
如果D中js这样写:
"window.location.href"、"location.href":D页面跳转
"parent.location.href":C页面跳转
"top.location.href":A页面跳转
如果D页面中有form的话:
<form>:form提交后D页面跳转
<formtarget="_blank">:form提交后弹出新页面
<formtarget="_parent">:form提交后C页面跳转
<formtarget="_top">:form提交后A页面跳转
关于页面刷新,D页面中这样写:
"parent.location.reload();":C页面刷新(当然,也可以使用子窗口的opener对象来获得父窗口的对象:window.opener.document.location.reload();)
"top.location.reload();":A页面刷新
现在回头看看,js实现网页防止被iframe框架功能就很简单了。假设frame.html文件中框架了content.html文件,那么思路是这样的:在content.html中加入js检测自己本身top.location.href地址,是否为top.location.href地址。如果是则没被嵌套,如果否的话即被嵌套了,这是我们可以提示一下。预览效果
网页防止被框架方法代码:
复制代码代码如下:
"window.location.href"、"location.href"、"self.location.href"是本页面跳转
"parent.location.href"是上一层页面跳转
"top.location.href"是最外层的页面跳转
举个例子说明(如上图):
如果A,B,C,D都是普通页面,D是C的iframe,C是B的iframe,B是A的iframe,
如果D中js这样写:
"window.location.href"、"location.href":D页面跳转
"parent.location.href":C页面跳转
"top.location.href":A页面跳转
如果D页面中有form的话:
<form>:form提交后D页面跳转
<formtarget="_blank">:form提交后弹出新页面
<formtarget="_parent">:form提交后C页面跳转
<formtarget="_top">:form提交后A页面跳转
关于页面刷新,D页面中这样写:
"parent.location.reload();":C页面刷新(当然,也可以使用子窗口的opener对象来获得父窗口的对象:window.opener.document.location.reload();)
"top.location.reload();":A页面刷新
现在回头看看,js实现网页防止被iframe框架功能就很简单了。假设frame.html文件中框架了content.html文件,那么思路是这样的:在content.html中加入js检测自己本身top.location.href地址,是否为top.location.href地址。如果是则没被嵌套,如果否的话即被嵌套了,这是我们可以提示一下。预览效果
网页防止被框架方法代码:
<scriptlanguage="javascript">
if(top.location!==self.location){
WarningTxt1="content页面被iframe了!";
WarningTxt2="我们跳出iframe,直接访问content页面吧!";
alert(WarningTxt1);
alert(WarningTxt2);
top.location.href=self.location.href;
}
</script>
相关文章
- 使用holder.js生成美观的网页占位图
- JS 暂时性死区「建议收藏」
- Vue项目中的mock.js的使用以及基本用法和ES6的新增方法
- js定时器与延时器_JS做定时器倒计时
- Vue.js官方的路由管理器 带你快速入门
- JS 修改网页大法 - 一段代码,编辑整个网页~
- js实现:输入密码才能打开网页。js实现密码保护的网页。
- 使用 fartscroll.js 让你的网页在滚动时放屁
- 改变网页颜色的JS调色板详解编程语言
- js选项卡详解编程语言
- JS将文件传输至MySQL数据库(.js传文件至mysql)
- php简单封装了一些常用JS操作
- JS网页安全色调色板DW风格
- JavaScript全面解析各种浏览器网页中的JS执行顺序
- js右下角与漂浮广告代码(兼容多浏览器)
- yepnope.js异步加载资源文件
- js选取多个或单个元素的实现代码(用class)
- js+数组实现网页上显示时间/星期几的实用方法
- 探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
- js获取触发事件元素在整个网页中的绝对坐标(示例代码)
- 倒记时60刷新网页的js代码
- js跨域问题浅析及解决方法优缺点对比
- JS获取当前网页大小以及屏幕分辨率等