JavaScript子窗口调用父窗口变量和函数的方法


Posted in Javascript onOctober 09, 2015

本文实例讲述了JavaScript子窗口调用父窗口变量和函数的方法。分享给大家供大家参考。具体如下:

示例1:子窗口是新打开的窗口

父窗口:

<!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>parent</title>
  <script type="text/javascript">
    var parentPara='parent';
    function parentFunction() {
      alert(parentPara);
    }
  </script>
</head>
<body>
  <button onclick="parentFunction()">显示变量值</button>
  <button onclick="window.open('child.html')">打开新窗口</button>
</body>
</html>

子窗口:

<!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>child</title>
  <script type="text/javascript">
    function modify() {
      opener.parentPara='child';
    }
  </script>
</head>
<body>
  <button onclick="opener.parentFunction()">调用父页面的方法</button>
  <button onclick="modify()">更改父页面中变量的值</button> 
</body>
</html>

只要在变量和函数前面加opener就可以访问指定资源了。

但是当父窗口被关闭时,再如此使用会报一个错:"被调用的对象已与其客户端断开连接。"

示例2:子页面是父页面的一个iframe

父页面:

<!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>parent</title>
  <script type="text/javascript">
    function fill() {
      //alert(frame1.window.childPara);  //显示frame1内的变量值
      var str=document.getElementById('txt1').value; //获得文本框内输入的值
      frame1.window.div1.innerHTML=str; //将值填入子页面的一个div中
    }
  </script>
</head>
<body>
  <div style="background-color:yellow;width:300px;height:300px;">
    父页面
    <iframe id="frame1" src="child.html" frameborder="0" scrolling="no" width="120px" height="120px"></iframe>
    <br/><br/><br/><br/>
    <input id="txt1" type="text"/>
    <button onclick="fill()">将文本框内值填充入子界面</button>
  </div>
</body>
</html>

子页面:

<!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>child</title>
  <script type="text/javascript">
    function fun() {
      parent.fill();
    }
  </script>
</head>
<body>
  <div style="background-color:lightblue;width:100px;height:100px;">
    <b>子页面</b><br/>
    <a href="#" onclick="fun()">同父页面按钮</a>
    <div id="div1" style="color:red;">
    </div>
  </div>
</body>
</html>

小发现:刷新父页面时,其中的iframe也会随之刷新;刷新iframe时,父页面不会刷新。

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 基础问答三
Dec 03 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
JavaScript数组方法总结分析
May 06 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
JavaScript注册时密码强度校验代码
Jun 30 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
js中unicode转码方法详解
Oct 09 #Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 #Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 #Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 #Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 #Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 #Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 #Javascript
You might like
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现apahce网站日志分析示例
2014/04/02 Python
python操作xml文件详细介绍
2014/06/09 Python
python基础教程之Hello World!
2014/08/29 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
Django的CVB实例详解
2020/02/10 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
Python新手学习标准库模块命名
2020/05/29 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
经济信息管理专业大学生求职信
2013/09/27 职场文书
新郎新娘婚礼答谢词
2014/01/11 职场文书
网上开商店的创业计划书
2014/01/19 职场文书
网管求职信
2014/03/03 职场文书
致青春观后感
2015/06/09 职场文书
小学生教师节广播稿
2015/08/19 职场文书