A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 冯超 高级黑马   /  2014-7-18 10:51  /  1264 人查看  /  2 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

通过javascript的学习,使我了解到了javascript分为ECMAscript,Bom和Dom。
open()函数并是Bom中的知识.
                              open()打开一个新的浏览器窗口或查找一个已命名的窗口。


在a.html中:
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>无标题文档</title>
  7. <script type="text/javascript">
  8.         var b = true;
  9.         var bWin;
  10.         function aFun() {
  11.                 //bWin
  12.                 if(b) {
  13.                         bWin = window.open("b.jsp","","width=460,heigth=300");
  14.                         b = false;
  15.                 }
  16.                 //1.调用 b页面中的 function()
  17.                   //bWin.bFun;  能不能?
  18.                 //2.获取 b页面中的DOM
  19.                 //var hNode = bWin.document.getElementById("hNode");
  20.                 //alert(hNode.nodeName);   
  21.         }
  22.         function test() {
  23.                 alert("aaa");
  24.         }
  25. </script>
  26. </head>

  27. <body onload="test()">
  28.         <input id="aNode" type="button" value="获取b页面的属性" onclick="aFun();" />

  29. </body>
  30. </html>
复制代码

在b.html中:
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>无标题文档</title>
  7. <script type="text/javascript">
  8.           var aWin;
  9.           function bFun() {
  10.                 aWin  = window.opener;
  11.                 //a.调用a页面中的function
  12.                    //aWin.test();

  13.                 //b.操作a页面中的dom
  14.                 var aEle = aWin.document.getElementById("aNode");
  15.                 alert(aEle.nodeName);
  16.                   
  17.           }
  18.           function test() {
  19.                   alert("aaaaaaaa");
  20.           }
  21. </script>
  22. </head>

  23. <body onunload="window.opener.b = true">
  24.         <h1 align="center" id="hNode">这个是b页面。。。。。。。。。。</h1>
  25.     <input type="button" value="获取a页面的属性" onclick="bFun()" />
  26. </body>
  27. </html>
复制代码

这个例子很好的说明了如何在父页面获取子页面的window对象,子页面如何获取父页面的window,以及如何调用js,DOM的。
总结:
获取window对象后(以下简称window):
1.调用js函数对象:
           window.fun();
2.调用js成员变量(必须全局):
           window.property
3.调用页面中的dom:
           window.document.getElementById("");
            .....

*****************************************************************
以前前提不能在file协议中通过(chrom谷歌浏览器不能),否则会获取不到你想要的东西。

关于framset中的frame ,ifram,无非就是获取window对象的方式不同而已,top,self,parent.最后附一张关于这个知识点的图。

a.jpg (79.39 KB, 下载次数: 9)

open

open

b.jpg (93.4 KB, 下载次数: 10)

框架

框架

2 个回复

倒序浏览
此帖仅作者可见
使用道具 举报
此帖仅作者可见
使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马