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 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
js 自动播放的实例代码
Nov 19 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
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页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
初识ThinkPHP控制器
2016/04/07 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
jquery操作select大全
2014/04/25 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
javascript实现简单页面倒计时
2021/03/02 Javascript
详解Python的Django框架中的模版相关知识
2015/07/15 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
乡镇干部十八大感言
2014/02/17 职场文书
企业文化演讲稿
2014/05/20 职场文书
服务宗旨标语
2014/07/01 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
作弊检讨书范文
2015/05/06 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis