首页 > 其他分享 >(转)窗口间的关系与交互(二)

(转)窗口间的关系与交互(二)

时间:2023-06-08 21:08:10浏览次数:36  
标签:关系 function 窗口 ary htm getElementById window 交互


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

说到底很简单,找到了所需要交互的窗口,就像访问本窗口内的对象来访问目标窗口内的变量、函数、 或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" οnclick=";" />
</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="新窗口输入" οnclick="" />
    <input type="button" value="新窗口输入(模态窗口)" οnclick="" />
    
    
</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="返回" οnclick=";" />
</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可看到相关结果。

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

其实多看看,再想想方法就出来了

标签:关系,function,窗口,ary,htm,getElementById,window,交互
From: https://blog.51cto.com/u_16065168/6443233

相关文章

  • (转)iframe窗口间的关系及交互(一)
    1.window.parent        当前窗口的上一级窗口,当前窗口可以是在iframe中或是frameset的一个frame中2.window.top  当前窗口的最顶级窗口。  不管当前窗口是嵌了多少层或是通过iframe或是frame嵌套,window.top将返回最外层窗口。 说明:如果当前窗口不在iframe......
  • 推荐10款超棒交互设计工具
    交互软件可以帮助设计师从“可用性”和“用户体验”的角度优化他们的作品。如果设计师想创建一个令人满意的交互设计作品,一个方便的交互设计软件是必不可少的。根据设计师的个人喜好和方便,选择易于使用的交互设计软件来完成创建。本文盘点十款易于使用的交互设计软件。 ......
  • Database System Concepts——读书笔记 第二章 关系模型简介
    关系模型简介在关系模型中,术语relation用于指代table,而术语tuple用于指代row。类似地,术语attribute(属性)指的是表中的一column(列)。我们必须区分数据库模式和数据库实例,前者是数据库的逻辑设计,后者是给定时刻数据库中数据的快照。关系的模式指的是它的逻辑设计,而关系的实例指的......
  • 多方合作时,系统间的交互是怎么做的?
    大家好!我是sum墨,一个一线的底层码农,平时喜欢研究和思考一些技术相关的问题并整理成文,限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。以下是正文!文章背景我们最近做了很多项目,有些我们是总负责的,有些是合作的。这些项目涉及的系统各种各样,但基本上没有一家公司会主动......
  • 生产者与消费者的关系是什么?市场供需关系
    前言本文主要讲述生产者和消费者模式,文中使用通俗易懂的案例,使你更好的学习本章知识点并理解原理,做到有道无术。一.什么是生产者和消费者模式生产者消费者模式并不属于常见的23种设计模式的,它是Controlnet网络中特有的一种传输数据的模式,设置方便,使用安全快捷。生产者消费者模......
  • 【转载】CXF spring jaxws:endpoint jaxws:server 区别 与 关系
    通过spring配置实现webservice的配置有两种,一种是jaxws:endpoint ,另外一种是jaxws:server。百度上没查到相关区别,又由于本人没有跟代码,所以又google了一下,才找到:First,theyareallfortheserversideconfiguration.Second,jaxws:endpointiscomingfromJAXWSAPI,a......
  • 墨天轮国产关系型分布式数据库榜单解读
    分布式关系型数据库概述作为数据库演进方向之一,分布式能力受到更多用户的关注。从技术架构演进来看,数据库正走过了从单机式、集中式到分布式的发展过程,目前是多种架构并存的阶段。分布式架构以其更好的存储与计算扩展能力,受到更多的关注。在墨天轮社区的中国数据库流行度排行榜上......
  • SQL 编程思想:一切皆关系
    在计算机领域有许多伟大的设计理念和思想,例如:在Unix中,一切皆文件。在面向对象的编程语言中,一切皆对象。关系数据库同样也有自己的设计思想:在SQL中,一切皆关系。关系模型关系模型(Relationalmodel)由E.F.Codd博士于1970年提出,以集合论中的关系概念为基础;无论是现实世界中的实......
  • 显卡,CPU,GPU和CUDA的关系与区别
    (1)显卡:显卡全称显示接口卡,又称显示适配器,是计算机最基本配置、最重要的配件之一。就像电脑联网需要网卡,主机里的数据要显示在屏幕上就需要显卡。因此,显卡是电脑进行数模信号转换的设备,承担输出显示图形的任务。具体来说,显卡接在电脑主板上,它将电脑的数字信号转换成模拟信号让显示器......
  • CANoe_ Trace 和 Graphics 窗口的介绍和使用
    Canoe是一款用于汽车网络分析和仿真的工具,其中包括Trace和Graphics两个窗口,用于显示和分析CAN网络数据。以下是对Canoe的Trace和Graphics窗口的简要介绍和使用说明:1.Trace窗口Trace窗口用于显示CAN网络中的消息和信号数据。可以在Trace窗口中实时查看CAN消息的发送和接收情......