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 阅读(10039) 评论(1) 编辑 收藏 举报
