脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript子窗口调用父窗口变量和函数

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

 更新时间：2015年10月09日 14:45:12   作者：w93223010  
这篇文章主要介绍了JavaScript子窗口调用父窗口变量和函数的方法,涉及JavaScript窗口调用的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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 开发编程风格Idiomatic.js指南中文版

    现代 JavaScript 开发编程风格Idiomatic.js指南中文版

    下面的章节描述的是一个 合理 的现代 JavaScript 开发风格指南，并非硬性规定。其想送出的核心理念是高度统一的代码风格（the law of code style consistency）。
    2014-05-05
  • 微信小程序带动画弹窗组件使用方法详解

    微信小程序带动画弹窗组件使用方法详解

    这篇文章主要为大家详细介绍了微信小程序带动画弹窗组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JavaScript高级教程之如何玩转箭头函数

    JavaScript高级教程之如何玩转箭头函数

    箭头函数是在es6中添加的一种规范,箭头函数相当于匿名函数,简化了函数的定义,下面这篇文章主要给大家介绍了关于JavaScript高级教程之如何玩转箭头函数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 微信小程序开发技巧汇总

    微信小程序开发技巧汇总

    这篇文章主要介绍了微信小程序开发技巧汇总,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • JavaScript 字符串操作的几种常见方法

    JavaScript 字符串操作的几种常见方法

    JavaScript 操作字符串的几种常见方法，需要的朋友可以参考下。
    2009-11-11
  • 原生js实现放大镜特效

    原生js实现放大镜特效

    这篇文章主要为大家详细介绍了原生js实现放大镜特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JavaScript实现显示和隐藏图片

    JavaScript实现显示和隐藏图片

    这篇文章主要为大家详细介绍了JavaScript实现显示和隐藏图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • 使用js操作css实现js改变背景图片示例

    使用js操作css实现js改变背景图片示例

    有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图，当然是可以的。具体的方法看下面的实现代码吧
    2014-03-03
  • 使用typescript+webpack构建一个js库的示例详解

    使用typescript+webpack构建一个js库的示例详解

    这篇文章主要介绍了typescript+webpack构建一个js库,本文主要记录使用typescript配合webpack打包一个javascript library的配置过程，需要的朋友可以参考下
    2022-07-07
  • JS中Eval解析JSON字符串的一个小问题

    JS中Eval解析JSON字符串的一个小问题

    JSON （JavaScript Object Notation）一种简单的数据格式，比xml更轻巧，下面通过本文给大家介绍JS中Eval解析JSON字符串的一个小问题，需要的朋友参考下吧
    2016-02-02

最新评论