一般的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. inheritance,菱形继承, 虚继承,virtual

    //菱形继承   |||||||   虚继承 #include <iostream> using namespace std; class R {     int r; public:   ...

  2. 条件阻塞Condition的应用

    Condition的功能类似在传统线程技术中的Object.wait和Object.notity的功能.   例子:生产者与消费者 import java.util.Random; import ja ...

  3. Failed to create java virtue machine（不能创建java虚拟机）

    今天开发模块时,遇到这个问题,本来是版本的问题,jdk1.6的版本有点低,与cxf框架不兼容,需要用到jdk1.7,结果安装了jdk1.7之后,客户方要求必须用jdk1.6,要统一,所以卸载jdk1. ...

  4. spark下测试akka的分布式通讯功能

    采用的spark版本为1.1.0 scala版本为2.10.4 编写scala类文件myactors.scala: package bluejoe import akka.actor._ import ...

  5. windows下用过VMware安装MAC OS X苹果系统

    vmware怎么安装os x10.9?vmware 10安装mac os 10.9教程详解 来源:互联网 作者:佚名 时间:10-30 13:50:20 [大 中 小] VMWare 虚拟机可以使你在 ...

  6. Ext.Net学习笔记15：Ext.Net GridPanel 汇总(Summary)用法

    Ext.Net学习笔记15:Ext.Net GridPanel 汇总(Summary)用法 Summary的用法和Group一样简单,分为两步: 启用Summary功能 在Feature标签内,添加如 ...

  7. 05顺序队列_Queue--(栈与队列)

    #include "stdio.h" #include "stdlib.h" #include "io.h" #include " ...

  8. java集合_collection子接口 list的特有方法，ArrayList类体现

    /* Collection |--List:元素是有序的,元素可以重复.因为该集合体系有索引. |--ArrayList:底层的数据结构使用的是数组结构.特点:查询速度很快.但是增删稍慢.线程不同步. ...

  9. Cabarc Overview (Microsoft TechNet)

    Original Link:  Cabarc Overview Applies To: Windows Server 2003, Windows Server 2003 R2, Windows Ser ...

  10. PHP中使用curlL实现GET和POST请求的方法

    基本结构 (1)初始化 curl_init() (2)设置变量 curl_setopt() .最为重要,一切玄妙均在此.有一长串cURL参数可供设置,它们能指定URL请求的各个细节.要一次性全部看完并 ...