黑马程序员技术交流社区

标题: 关于javascript中的window中的open函数了解 [打印本页]
作者: 冯超    时间: 2014-7-18 10:51
标题: 关于javascript中的window中的open函数了解
通过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>

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

  31. </body>
  32. </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();

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

  25. <body onunload="window.opener.b = true">
  26.         <h1 align="center" id="hNode">这个是b页面。。。。。。。。。。</h1>
  27.     <input type="button" value="获取a页面的属性" onclick="bFun()" />
  28. </body>
  29. </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)

框架

框架




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2