JavaScript中父子页面数据交互实例详解

js中关于父子页面数据交互一些写法

1.window.frames["test"].document.getElementById(‘menu’);
2.//由于所有的函数都存放在window对象里面,可去掉开头的window:
3.frames["test"].document.getElementById(‘menu’);
4.//在浏览器中,帧的name属性被默认等同于子页面的window对象,因此可以进一步简写:
5.test.document.getElementById(‘menu’);
window.frames["test"].document.getElementById('menu');
//由于所有的函数都存放在window对象里面,可去掉开头的window:
frames["test"].document.getElementById('menu');
//在浏览器中,帧的name属性被默认等同于子页面的window对象,因此可以进一步简写:
test.document.getElementById('menu');2.2 父页面访问子页面函数或对象。子页面的函数和对象都在其window对象里,同上,关键是获取该对象。

Java代码

1.//假如child.html定义了showMesg函数,需要在父中调用,则这样写
2.window.frames['test'].showMesg();
3.//简写形式
4.test.showMesg();
5.//同理,对象也是如此访问
6.alert(test.person);
//假如child.html定义了showMesg函数,需要在父中调用,则这样写
window.frames['test'].showMesg();
//简写形式
test.showMesg();
//同理,对象也是如此访问
alert(test.person);

例子

父窗口:a1.html

 代码如下 复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>a.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <script language="JavaScript">
 function openWin(){
  window.open("./a2.html","_blank","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
 }
 function setValues(id,name){
  document.getElementById("cid").value = id;
  document.getElementById("cname").value = name;
 }
  </script>
 
  <body>
    <form name="form1" action="test.html" method="post" >
          客户id: <input type="text" name="cid" value=""  id="cid"  ><br>
     客户名称<input type="text" name="cname" value=""  id="cname"  >
    <input type="button" name="ok" value="请选择客户" onclick="openWin();"/>
      </form>
</body>
 
</html>

子窗口:a2.html

 代码如下 复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>a2.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
   <script language="JavaScript">
 function viewData(id,name){
  window.opener.setValues(id,name);
  window.opener = null;
  window.close();
 }
  </script>
  <body>
      <table border="1">
         <tr>
          <td>操作</td>
   <td>客户id</td>
   <td>客户名称</td>
         </tr>
   
    <tr>
          <td><input type="button" value="选择" id="ss" onclick="viewData('001','深圳华为')"></td>
   <td>001</td>
   <td>深圳华为</td>
         </tr>
    <tr>
          <td><input type="button" value="选择"   onclick="viewData('002','用友软件')"> </td>
   <td>002</td>
   <td>用友软件</td>
         </tr>
      </table>
  </body>
 
 
 
</html>

时间: 2024-09-07 03:50:42

JavaScript中父子页面数据交互实例详解的相关文章

PHP JSON格式数据交互实例详解

此前我写了不少在PHP网站开发中应用XML进行数据交互的实例,这两天通过PHP解析JSON并进行交互的实例学习和了解了JSON在PHP中的应用,感觉非常方便,在PHP中解析JSON主要用到json_encode和json_decode两个PHP JSON函数,比PHP解析XML方便很多,下面详细介绍下PHP JSON的使用. JSON基础介绍 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON主要有两种结构: "名称/值"对的集合,

javascript中删除页面数据的问题

问题描述 javascript中删除页面数据的问题 在一个HTML程序的的地步引入了两个JS程序,现在我在HTML页面添加了一个删除按钮 <a href=""index.html""><input type=""button"" value=""Remove!"" id=""a"" onclick=""remo

JavaScript函数节流概念与用法实例详解_javascript技巧

本文实例讲述了JavaScript函数节流概念与用法.分享给大家供大家参考,具体如下: 最近在做网页的时候有个需求,就是浏览器窗口改变的时候需要改一些页面元素大小,于是乎很自然的想到了window的resize事件,于是乎我是这么写的 <!DOCTYPE html> <html> <head> <title>Throttle</title> </head> <body> <script type="text

PHP laravel中的多对多关系实例详解

数据表之间是纵横交叉.相互关联的,laravel的一对一,一对多比较好理解,官网介绍滴很详细了,在此我就不赘述啦,重点我记下多对多的关系 一种常见的关联关系是多对多,即表A的某条记录通过中间表C与表B的多条记录关联,反之亦然.比如一个用户有多种角色,反之一个角色对应多个用户. 为了测试该关联关系,我们沿用官网的用户角色示例: 需要三张数据表:users.roles 和 role_user,role_user 表按照关联模型名的字母顺序命名(这里role_user是中间表),并且包含 user_i

JavaScript中SetInterval与setTimeout的用法详解_javascript技巧

setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数

在JavaScript中对HTML进行反转义详解_javascript技巧

在JavaScript中对字符串进行转义和反转义操作,常用的方法莫过于使用encodeURI (decodeURI).encodeURIComponent (decodeURIComponent)这几个方法,具体使用方法和区别. 但是如何在JavaScript中对HTML进行反转义操作呢?例如下面这段代码: var jsonData = { title: "<%= data.name? data.name : title %>", desc: "<%= da

Vuejs第九篇之组件作用域及props数据传递实例详解_javascript技巧

本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html 本教程是小编结合官方文档整理的一套更加细致,代码更多更全的教程,特别适合新手阅读. props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <script&g

Mongodb中MapReduce实现数据聚合方法详解_MongoDB

Mongodb是针对大数据量环境下诞生的用于保存大数据量的非关系型数据库,针对大量的数据,如何进行统计操作至关重要,那么如何从Mongodb中统计一些数据呢? 在Mongodb中,给我们提供了三种用于数据聚合的方式: (1)简单的用户聚合函数: (2)使用aggregate进行统计: (3)使用mapReduce进行统计: 今天我们首先来讲讲mapReduce是如何统计,在后续的文章中,将另起文章进行相关说明. MapReduce是啥呢?以我的理解,其实就是对集合中的各个满足条件的文档进行预处理

JavaScript中String.match()方法的使用详解

  这篇文章主要介绍了JavaScript中String.match()方法的使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 此方法用于当匹配针对正则表达式的字符串来检索匹配. 语法 ? 1 string.match( param ) 下面是参数的详细信息: param : 正则表达式对象 返回值: 如果正则表达式不包括g标志,返回的结果相同于regexp.exec(string) 如果正则表达式包含g标志,则该方法返回一个包含所有匹配的数组 例子: ? 1 2 3 4 5 6 7