JS window对象的top、parent、opener含义介绍 以及防止网页被嵌入框架的代码

简介: 1.top该变更永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令,就可以用top变量。 2.openeropener用于在window.open的页面引用执行该window.open方法的的页面的对象。

1.top
该变更永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令,就可以用top变量。 
2.opener
opener用于在window.open的页面引用执行该window.open方法的的页面的对象。例如:A页面通过window.open()方
法弹出了B页面,在B页面中就可以通过opener来引用A页面,这样就可以通过这个对象来对A页面进行操作。 
3.parent
parent用于在iframe,frame中生成的子页面中访问父页面的对象。例如:A页面中有一个iframe或frame,那么iframe
或frame中的页面就可以通过parent对象来引用A页面中的对象。这样就可以获取或返回值到A页面中。
4.另外self 指的是当前窗口

parent与opener的区别:

parent指父窗口,在FRAMESET中,FRAME的PARENT就是FRAMESET窗口。 
opener指用WINDOW.OPEN等方式创建的新窗口对应的原窗口。 
parent是相对于框架来说父窗口对象 
opener是针对于用window.open打开的窗口来说的父窗口,前提是window.open打开的才有

document.parentWindow.menthod()調用父頁面的方法

 

top实例

<!DOCTYPE html>

 <html>

 <head> 

<meta charset="utf-8"> 

<title>top</title> 
<script> 
function check(){ 
    if (window.top!=window.self) { 
        document.write("<p>这个窗口不是最顶层窗口!我在一个框架?</p>") 
    } 
    else{ 
        document.write("<p>这个窗口是最顶层窗口!</p>") 
    } 

</script> 
</head> 
<body> 
<input type="button" onclick="check()" value="检查窗口"> 
</body> 
</html>

 

一段很简单的防止网页被嵌入框架的代码javascript代码,大家只要将它放入网页源码的头部,那些流氓就没有办法使用你的网页了。

<script type="text/javascript">

if (window!=top) // 判断当前的window对象是否是top对象

top.location.href =window.location.href; // 如果不是,将top对象的网址自动导向被嵌入网页的网址

</script>

 

相关文章
|
5天前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
22 1
|
10天前
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
6天前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
58 41
|
9天前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
9 1
【JavaScript】网页交互的灵魂舞者
|
8天前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
9 2
|
9天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
9 2
|
10天前
|
JSON JavaScript 前端开发
Node.js Express 框架
10月更文挑战第7天
19 2
|
10天前
|
JavaScript 前端开发 API
|
5天前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理、应用与代码演示
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理、应用与代码演示
|
6天前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信