窗口间的关系及交互(二) _增强了相邻窗口特征之间的交互作用-CSDN博客

前一篇讲了窗口间的关系，下面来谈谈怎么交互。

说到底很简单，找到了所需要交互的窗口，就像访问本窗口内的对象来访问目标窗口内的变量、函数、或html对象等。

当然也要举个例子。

a.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
</head>
<body bgcolor="blue">
   <iframe src="b.htm" name="bChild"></iframe>

    <div id="div1">div的内容</div>
</body>
</html>

<script type="text/javascript">
  var a = "test";

  function GetString()
  {
    return "a窗口的值";
  }
</script>

b.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body bgcolor="green">
    BBBBBBBB

    <input type="button" value="click" onclick="javascript:Show();" />
</body>
</html>
<script type="text/javascript">
    function Show()
    {
       alert("父窗口的变量a的值= "+  window.parent.a);
       alert("父窗口的函数GetString() =  "+  window.parent.GetString());
       alert("父窗口的元素div的innerHTML =  "+  window.parent.document.getElementById("div1").innerHTML);
    }
</script>

通过浏览器访问a.htm,点击click可得到相应的结果。如此一台，窗口间的操作就容易很多。

再举个窗口间传值的简单例子。

要求实现如下：在父窗口中打开一个子窗口，输入相关内容，关闭子窗口，将输入值返回到父窗口。

这是最常见的需求。

可以用window.open或window.showModalDialog来实现。

注意：showModalDialog仅适用于ie。

以下是例子。

a.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
</head>
<body bgcolor="blue">

    <input type="text" id="t1" />
    <input type="text" id="t2" />
    <input type="button" value="新窗口输入" onclick="javascript:GoInput()" />
    <input type="button" value="新窗口输入(模态窗口)" onclick="javascript:GoInputModal()" />


</body>
</html>

<script type="text/javascript">


  function GoInput()
  {
     window.open("b.htm");
  }

  function GoInputModal()
  {
    var ary = window.showModalDialog("b.htm");
    if(ary!=null)
    {
       SetValue(ary);
    }
  }

  function SetValue(ary)
  {
    document.getElementById("t1").value = ary[0];
    document.getElementById("t2").value = ary[1];
  }
</script>

b.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body bgcolor="green">

    <input type="text" id="t1" />
    <input type="text" id="t2" />
    <input type="button" value="返回" onclick="javascript:GoReturn();" />
</body>
</html>
<script type="text/javascript">
    function GoReturn()
    {
       var ary = new Array(document.getElementById("t1").value,document.getElementById("t2").value);
       if(window.opener!=null &&
       typeof(window.opener.SetValue)!= "undefined")
       {
            window.opener.SetValue(ary);

       }
       else
       {
            window.returnValue  =     ary;
       }
       window.close();
    }
</script>

运行a.htm可看到相关结果。

懂得了基本原理，不论情况有多么复杂，问题都会迎刃而解。