窗口间的关系及交互(二)

原创 2007年02月27日 01:03:00

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

说到底很简单,找到了所需要交互的窗口,就像访问本窗口内的对象来访问目标窗口内的变量、函数、 或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可看到相关结果。

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

iphone 开发 窗口(UIWindow) 与视图(UIView)之间以及整个程序间的关系,深层解析

窗口和视图是为iPhone应用程序构造用户界面的可视组件。窗口为内容显示提供背景平台,而视图负责绝大部分的内容描画,并负责响应用户的交互。 和Mac OS X一样,iPhone OS通过窗口和视...

[Visual C++系列]3.1 文档 视图 框架窗口间的关系和消息传送规律

3.1 文档 视图 框架窗口间的关系和消息传送规律 在MFC中M$引入了文档-视结构的概念,文档相当于数据容器,视相当于查看数据的窗口或是和数据发生交互的窗口。(这一结构在MFC中的OLE,OD...
  • bbdxf
  • bbdxf
  • 2011年08月06日 10:58
  • 496

Android6.0 WMS(二) WMS创建窗口与创建Surface的关系

在上篇博客我们知道ViewRootImpl的setView函数会调用WindowSession的addToDisplay函数,这个函数通过Binder最终会调用WMS的addWindow函数,增加窗口...

InTouch与关系数据库的数据交互

  • 2009年01月06日 15:12
  • 217KB
  • 下载

VC++编写交互程序时将打印结果输出到cmd窗口显示

VC++编写交互程序时将打印结果输出到cmd窗口显示 地址:http://www.itwis.com/html/c/ccc/20080527/1576.html 2011-06-20 ...
  • erick08
  • erick08
  • 2013年06月06日 17:33
  • 1481

Android透明背景Dialog、Dialog实现悬浮窗口 可与输入法交互,不被输入法覆盖

直接干货上代码! 直接干货上代码! PersonSetRemarkDialog 核心代码 package com.ctri.ui.personal.widget; import android.a...

图形中窗口,视区的关系

  • 2008年11月01日 21:49
  • 6.39MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:窗口间的关系及交互(二)
举报原因:
原因补充:

(最多只允许输入30个字)