一般的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

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>iframe</title>

</head>

<body>

index.html

<div id="panel"></div>

<iframe src="a.html"></iframe>

<script language="javascript">

function showMessage()

{

    alert("hello")

}

o = new Object();

o.showMessage = showMessage;

</script>

</body>

</html>

c.html

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>iframe</title>

</head>

<body>

c.html

<input type="button" value="click me" onclick="show()" ></input>

<script language="javascript">

function show()

{

    window.top.o.showMessage();

}

</script>

</body>

</html>

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

function show()

{

    o = window.top.document.getElementById("panel");

    o.innerHTML = "hello";

}

JavaScript: top对象的更多相关文章

  1. JavaScript的对象/下

    JavaScript的对象 一.BOM对象 BOM----browser object model 1.window对象 所有浏览器都支持window对象. 概念上讲,一个html文档对应一个wind ...

  2. JavaScript DOM 对象

    JavaScript DOM 对象   什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C ...

  3. 前端基础：JavaScript DOM对象

    JavaScript DOM对象 通过HTML DOM,可以访问JavaScript HTML文档的所有元素. 一.HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(D ...

  4. web前端学习（四）JavaScript学习笔记部分（8）-- JavaScript 浏览器对象

    1.window对象 1.1.window对象: window对象是BOM的核心,window对象指当前的浏览器窗口 所有javaScript全局对象.函数以及变量均自动生成为window对象的成员 ...

  5. javascript 全局对象--w3school

    JavaScript全局对象 1.  decodeURI()解析某个编码的URI. 2.decodeURInComponent()解析一个编码的URI组件. 3.encodeURI()把字符串编码为U ...

  6. JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString

    JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString 如下示例: 直接写的a1就是一个Json对象,a2 就是一个Json对象字符串; 通 ...

  7. 从零构建JavaScript的对象系统

    一.正统的类与继承 类是对象的定义,而对象是类的实例(Instance).类不可直接使用,要想使用就必须在内存上生成该类的副本,这个副本就是对象. 以Java为例: public class Grou ...

  8. 关于javascript自定义对象(来自网络)(最近几天不会的)

    javascript定义对象的几种简单方法 1.构造函数方式,全部属性及对象的方法都放在构造方法里面定义 优点:动态的传递参数 缺点:每创建一个对象就会创建相同的方法函数对象,占用大量内存 funct ...

  9. 据说每个大牛、小牛都应该有自己的库——JavaScript原生对象拓展

    在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏,一是,关于写个自己的库的想法由来 ...

随机推荐

  1. 4.关于phpstudy for linux 的安装（LNMP）更好的环境请看8.LNMP环境

    phpstudy真的很坑爹! 所以我在后面重新写了一个LNMP环境的集成包应用! 首先,我们在自己本地开发的时候一般使用的虚拟机的权限账号都是最高的,也就是我们的root账户 PS:我已经更改镜像源为 ...

  2. 对于jdk jre jvm的简单认识

    1:名词解释 jdk:java  develop  kit:java开发工具包 jre:java runtime  environment :java开发运行时环境 jvm:java virtua m ...

  3. Linux修改 DNS

    前不久服务器上遇到一些问题,需要修改服务器的dns配置,写下来记下,笔者使用的说centos 6.5. DNS的配置文件在/etc/resolv.conf,但一般情况下修改后重启服务 service ...

  4. [转]在64位的环境中使用VS建立Web项目进行Oracle连接需要注意WebDev是32位的

    本文转自:http://www.cnblogs.com/studyzy/archive/2010/10/28/1863056.html 我们平时使用的都是32位的机器进行开发,装的都是32位的软件,但 ...

  5. Redis的配置

    Redis是一个强大的Key-Value存储系统,在前面我们已遇到了两个问题: 1.redis server 启动后,独占进程,能不能修改为后台服务呢? 2.redis server 服务是单线程的, ...

  6. winform 上传

    public class ImitateSelectFile { public void Select(HtmlElement htmlEle, string fileFullPath) { html ...

  7. Centos 6.4 安装elasticsearch+kibana

    elasticsearch和kibanna的链接地址:https://www.elastic.co/downloads,我的环境里用的包为kibana-4.1.1-linux-x64.tar.gz和e ...

  8. scala学习笔记：变量声明中的模式

    先看个正常的写法: scala> val x = 1 x: Int = 1 体会一下元组的写法: scala> val (x,y,z)=(1,2,3) x: Int = 1 y: Int ...

  9. 第一章 认识jQuery

    jQuery是一个优秀的JavaScript库,它凭借简洁地语法和跨平台的兼容性,极大地简化了开发人员遍历HTML文档,操作DOM,处理事件,执行动画和开发Ajax操作. jQuery优势:1.轻量级 ...

  10. Jquery 1.11.1 Checkbox checked 判断

    if($(this).prop('checked'))