zoukankan      html  css  js  c++  java
  • 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";
    }
  • 相关阅读:
    Python进阶-----类、对象的属性的增删改查
    SpringCloud(Finchley版) 服务注册与服务发现-Eureka原理深入
    SpringCloud项目之Eureka 配置 application.yml
    sql 获得各科最高分成绩和人数
    mysql主从同步
    Log4j.properties
    JDBC 配置 jdbc.properties
    Java 通过ant打包时给JS/Jsp/css等文件加上版本号 防止有缓存
    Ant 打包 build文件
    Java zip 压缩包下载excel文件
  • 原文地址:https://www.cnblogs.com/code-style/p/4237287.html
Copyright © 2011-2022 走看看