JavaScript: top对象

一般的JS书里都会在讲框架集的时候讲top,这会让人误解,认为top对象只是代表框架集,其实top的含义应该是说浏览器直接包含的那一个页面对象,也就是说如果你有一个页面被其他页面以iframe的方式包含了,无论包含的层级是什么,都可以用top访问最外层的哪一个页面,因为这个页面被浏览器直接包含,这个事情的意义在于如果多个页面被同时加载,他们之间需要通信,就完全可以在最外层的页面设置一个通信对象,其他页面都通过这个对象进行通信(需要说明的是,如果要这么干,需要将他们 部署在服务器上进行测试,仅仅在文件系统上测试,可能因为跨域而测试失败)

测试:

chorme浏览器,apache2服务器,原生js, index.html包含a.html; a.html包含b.html, b.html包含c.html; c.html通过top对象访问index.html定义的函数以及页面元素

index.html

c.html

top对象是window对象的子对象,如果要访问页面元素,可以这样写:

Original: https://www.cnblogs.com/code-style/p/4237287.html
Author: codestyle
Title: JavaScript: top对象

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/535984/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • this:从JavaScript执行上下文视角讲this

    在上篇文章中,我们讲了词法作用域、作用域链以及闭包,并在最后思考题中留了下面这样一段代码 <span class="token keyword">v…

    JavaScript 2023年5月29日
    081
  • javaScript系列 [43]-TS、Class and ES5

    404. 抱歉,您访问的资源不存在。 可能是网址有误,或者对应的内容被删除,或者处于私有状态。 代码改变世界,联系邮箱 contact@cnblogs.com 园子的商业化努力-困…

    JavaScript 2023年5月29日
    096
  • JavaScript 设计模式分类

    设计模式的目的是为了提高代码的整洁性、降低代码的资源占用量。 JS中的设计模式可分为以下三种: 说明:专注于处理对象创建的机制,以合适的方式创建对象,以此来降低创建对象过程的复杂性…

    JavaScript 2023年5月29日
    098
  • Minify JavaScript On the Fly

    One cause of slow loading web pages is the time taken to load the JavaScript, CSS and imag…

    JavaScript 2023年5月29日
    078
  • JavaScript中的Promise

    1. promise定义 Promise是 异步编程的一种解决 方案,比传统的解决方案( 函数回调和 事件)更合理,更强大。ES6中将Promise写进了语言标准,统一了用法,提供…

    JavaScript 2023年5月29日
    081
  • JavaScript 拼接audio

    拼接audiobuffer 获取一个audiobuffer数组,然后把audiobuffer拼接起来。( 我没尝试成功) export const mergeAudios = (b…

    JavaScript 2023年5月29日
    076
  • Javascript自动化文档工具JSDuck在Windows下的使用心得

    作者: zyl910 一、工具比较 为了让前端JavaScript程序更具可维护性,更利于团队开发,文档非常重要。此时便需要使用自动化文档工具了。 我对比了各种JavaScript…

    JavaScript 2023年5月29日
    065
  • JavaScript Promise返回值详解

    JavaScript Promise返回值详解Promise回顾Promise回调函数返回非Promise值Promise回调函数返回Promise对象Promise回调函数中抛出…

    JavaScript 2023年5月29日
    092
  • java 执行 javascript 代码

    package com.ruoyi.project.front.controller; import java.math.BigDecimal; import java.util….

    JavaScript 2023年5月29日
    074
  • JavaScript统计数据处理(5)- 类的封装和继承

    JavaScript是一种广泛使用网页编程语言,在浏览器中运用JavaScript技术处理统计数据具有最佳的推广传播效果 类是具有共同属性和方法的集合。JS是一门面向对象语言,其对…

    JavaScript 2023年5月29日
    060
  • Google Maps Embed API & JavaScript API

    前言 很多年前写过一篇 Google Map 谷歌地图, 这篇算是翻新版本. Google Map Registration Google Maps Platform 是整个 Go…

    JavaScript 2023年5月29日
    085
  • JavaScript 秒数转换为时分秒

    在page页面含有倒计时,需要把剩余秒数转换为时分秒。 场景 在page页面含有倒计时,需要把剩余秒数转换为时分秒。 1.1 函数 javascript;gutter:true; …

    JavaScript 2023年5月29日
    080
  • javaScript系列 [44]-Throttle and Debounce

    404. 抱歉,您访问的资源不存在。 可能是网址有误,或者对应的内容被删除,或者处于私有状态。 代码改变世界,联系邮箱 contact@cnblogs.com 园子的商业化努力-困…

    JavaScript 2023年5月29日
    049
  • JavaScript 浮动定位提示效果

    本来想做一个集合浮动定位和鼠标跟随的tooltips效果,但发现定位和鼠标跟随在一些关键的地方还是不同的,还是分开来吧。这个效果本身难度不大,主要在程序结构和扩展中下了些功夫,务求…

    JavaScript 2023年5月29日
    072
  • 给一个数字,输出人民币组合(JavaScript算法)

    题目: 人民币由100元,50元,20元10元,5元1元,5毛,1毛面额组合。写一个方法随便传入一个数字参数,就输出人民币组合。比如传入1526.5就显示1526.5元由人民币10…

    JavaScript 2023年5月29日
    090
  • 走进JavaScript——重拾函数

    Original: https://www.cnblogs.com/pssp/p/6921700.htmlAuthor: 追梦子Title: 走进JavaScript——重拾函数

    JavaScript 2023年5月29日
    082
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球