`
ianylb
  • 浏览: 73545 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

JavaScript中的window对象分析

阅读更多
好久没有学习了。今天准备将自己这段时候做项目时用到的js心得记录下来。

  • 自定义的方法和属性默认属于window对象。

  • 如果不做回跨页面调用和回调,也许不知道这个知识点也没什么关系。但如果你想在你新打开的窗口中调用父窗口中的方法和属性,那你就必须想方设法先找到window对象。然后依据自定义的方法和属性默认属于window对象这个原理来调用你所要调用的方法和属性。
    例如:
    function a(){
      alert("this is a method");
    }
    那么找到a()的路径就可能有
    1、a()  当前window下调用
    2、window.opener.a()  子窗口、模式对话框、非模式对话框对话框中调用
    3、window.parent.a()  iframe中调用父框架中的方法
    4、window.frames["iframeName"].a();或iframeName.a();   iframe中调用子窗口中的a()方法

  • window对象不随页面的重载、刷新而改变

  • 前段时间做项目时,担心打开的子窗口中的页面一旦刷新或重定向到另外一个页面后就没法操作父窗口、没法找到父窗口的引用了。最后事实证明window对象不随页面的重载、刷新而改变,因为重载、刷新所改变的只有window中的document属性,而浏览器窗口的大小,状态、工具栏、标题栏等都没发生改变。
    如下:
    a.html
    <BODY>
      <input type="button" value="打开一个新窗口" onclick="window.open('b.html')">
    </BODY>

    b.html
    <BODY>
      <a href="c.html">打开c.html</a>
    </BODY>

    c.html
    <BODY>
      <input type="button" value="关闭父窗口" onclick="window.opener.close()">
    </BODY>

    实践最张证明:点击c.html页面"关闭父窗口"按钮依然能关闭a.html页面所在的浏览器窗口。
分享到:
评论

相关推荐

    JavaScript中BOM对象原理与用法分析

    本文实例讲述了JavaScript中BOM对象原理与用法。...博主是这么理解的,BOM对象指的是window对象,而window对象并不是JavaScript内置的对象,而是浏览器生成的对象。如果需要了解内置对象的话,可以翻阅我的另一篇博文。

    JavaScript 浏览器对象模型BOM原理与常见用法实例分析

    window对象是JavaScript中的顶级对象。 全局变量、自定义函数也是window对象的属性和方法。 window对象下的属性和方法调用时,可以省略window。 弹出系统对话框 比如说,alert&#40;1&#41;是wi

    JavaScript中exec函数用法实例分析.docx

    JavaScript 中 exec 函数用法实例分析 JavaScript 中 exec 函数是正则表达式的一部分,用于在字符串中执行查找,并返回包含该查找结果的一个数组。本文将详细介绍 exec 函数的用法、定义和使用方法。 一、exec ...

    javascript中clipboardData对象用法详解

    主要介绍了javascript中clipboardData对象用法,详细分析了clipboardData对象的功能及相关使用技巧,需要的朋友可以参考下

    JS window对象简单操作完整示例

    主要介绍了JS window对象简单操作,结合完整实例形式分析了JavaScript Window对象各种常见提示框、弹出窗口及时间相关操作技巧,需要的朋友可以参考下

    javascript函数的解释

    parseInt 也是一个JavaScript 的内部函数,分析一个 字符串,并返回给定基数或底数的一个整数(若没有给定基数,则假定基数为10)。 计算标签的个数;document. getElementsByTagName(‘标签名’).lenth; 二、...

    JavaScript王者归来part.1 总数2

     11.1 Window对象--最基本的浏览器对象   11.1.1 Window对象概览   11.1.2 Window对象的生命周期   11.1.3 Window对象的属性和方法   11.1.4 一个多窗口应用的例子   11.2 Document对象--浏览器窗口文档...

    《精通Javascript+jQuery》光盘源码

     2.10.1 window对象  2.10.2 document对象  2.10.3 location对象  2.10.4 navigator对象  2.10.5 screen对象  第3章 ccCSS基础  3.1 CSS的概念  3.1.1 标记的概念  3.1.2 传统HTML的缺点  3.1.3 ...

    javascript试题及答案.docx

    本文档提供了 JavaScript 相关试题及答案,涵盖了 JavaScript 的基础知识点,包括函数、对象、事件处理程序、文本框、按钮、单选框、下拉框、表单验证、JavaScript 中的时间和日期等知识点。 1. 在 JavaScript 中能...

    深入浅出分析javaScript中this用法

    本文实例讲述了javaScript...结论:在Javascript中,this指向函数执行时的当前对象。 简单点说就是调用的方法属于哪个对象,this就指向那个对象。 1. 全局window 简单代码 var message = this in window; var printM

    javascript中AJAX用法实例分析

    本文实例讲述了javascript中AJAX用法。分享给大家供大家参考。具体分析如下: 兼容地获得XMLHttpRequest对象: var xhr = null; if(window.XMLHttpRequest){ //非IE浏览器 xhr = window.XMLHttpRequest; }else if...

    screen对象(教辅).pdf

    Screen 对象详解 ...Screen 对象用于获取客户端显示屏幕的信息,而 Window 对象的 innerWidth/Height 属性用于获取窗口的文档显示区的高度和宽度。了解这两个对象的区别可以帮助我们更好地开发Web应用程序。

    《Ajax技术简介和案例分析》(42P)

    研讨内容 Ajax原理与Web2.0 通过案例分析Ajax优缺点 Ajax常用开发技巧 与Ajax相关的常用JavaScript库分析 Ajax资源分享 Ajax原理与Web2.0 Ajax原理 ...其他浏览器则把它作为window对象的属性 …………

    javascript中this的用法实践分析

    本文实例讲述了javascript中this的用法。分享给大家供大家参考,具体如下: 实践一:this在点击等事件中的指向 html结构: &lt;button id='btn'&gt;click me&lt;/button&gt; javascript结构: var btn = document...

    JavaScript基础面试题_62题.pdf_前端面试题

    本文将对JavaScript基础面试题进行详细的解释和分析,涵盖了JavaScript的基本数据类型、变量和函数的声明提升、闭包、this对象、事件模型、新操作符、栈和堆的理解等知识点。 一、JavaScript基本数据类型 ...

    javascript事件模型实例分析

    本文实例讲述了javascript事件模型的用法。...在IE浏览器中事件对象是window的一个属性,在DOM标准中,event必须作为唯一的参数传给事件处理函数 获得兼容的event 对象: function(event){ //event 是作

    精通JavaScript+jQuery Part1

     2.10.1 window对象  2.10.2 document对象  2.10.3 location对象  2.10.4 navigator对象  2.10.5 screen对象  第3章 ccCSS基础  3.1 CSS的概念  3.1.1 标记的概念  3.1.2 传统HTML的缺点  ...

    JavaScript函数调用堆栈loader

    webpack loader,记录JavaScript函数调用堆栈到字符串window.dxj中,该堆栈可格式化进一步对比分析 也可保存不同时刻的对象进行对比分析

    疯狂HTML 5+CSS 3+JavaScript讲义(第2版)+源代码

    14.8 使用window对象 469 14.9 navigator和地理定位 479 14.10 HTML 5增强的History API 485 14.11 使用document对象 490 14.12 HTML 5新增的浏览器分析 493 14.13 本章小结 496 第15章 事件处理机制 497 ...

    Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结

    主要介绍了Vue指令v-for遍历输出JavaScript数组及json对象的常见方式,结合实例形式总结分析了vue.js使用v-for指令遍历输出js数组与json对象的常见操作技巧,需要的朋友可以参考下

Global site tag (gtag.js) - Google Analytics