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
<!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"; }
posted on 2015-01-20 20:47 codestyle 阅读(10067) 评论(1) 编辑 收藏 举报
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· SQL Server 2025 AI相关能力初探
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
2014-01-20 最佳日志实践