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程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript实现弹出子窗口并传值给父窗口

    新建父窗口页面: 加入以下脚本 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">     <title>First</title> </head> <script type="text/javascript"> function ShowDialog(Url) {    

  • JavaScript实现提交模式窗口后刷新父窗口数据的方法

    本文实例讲述了JavaScript实现提交模式窗口后刷新父窗口数据的方法.分享给大家供大家参考,具体如下: 有些时间,按需求设计,一个窗口中,点击按扭,弹出模式窗口,在模式窗口中,添加完数据后(提交),关闭模式窗口,并且刷新父窗口,而恰恰模式窗口并不支持window.opener,所以无法获得父窗口,也就是说无法在关闭模式窗口后,来得到父窗口,但是可以借助showModealDialog的返回值来判断是否刷新,当调用showModealDialog时,父窗口代码会停在这一行,当弹出的模式窗口关闭

  • js 模式窗口(模式对话框和非模式对话框)的使用介绍

    Javascript里面分模式对话框和非模式对话框,其实两者区别就是在对话框被关闭之前用户能否在同一页面的其他地方进行工作.比如"打开文件"对话框便是典型的模式对话框,在你对这个对话框做出动作才能对打开该对话框的程序进行其他操作,而非模式对话框则不必. 模式对话框:showModalDialog 非模式对话框:showModelessDialog vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]

  • JS实现弹出居中的模式窗口示例

    本文实例讲述了JS实现弹出居中的模式窗口.分享给大家供大家参考,具体如下: <!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&

  • JavaScript弹出新窗口后向父窗口输出内容的方法

    本文实例讲述了JavaScript弹出新窗口后向父窗口输出内容的方法.分享给大家供大家参考.具体如下: 下面的JS代码演示了如何通过window.open方法打开一个弹出窗口,然后通过弹出窗口的句柄向父窗口输出信息的方法 <!DOCTYPE html> <html> <head> <script> function openWin() { myWindow=window.open('','','width=200,height=100'); myWindow

  • JAVASCRIPT模式窗口中下载文件无法接收iframe的流

    在打开的模式窗口中,如果要借助于模式窗口接受服务器的流,通常需要隐藏一个iframe;有时候,然后采用iframe.src的形式去做请求:有时,在下载时发现服务器无法接收iframe的流,因为在模式窗口中没有触发iframe的src重新定向事件,普通的窗口无此问题. 具体解决办法: 在模式窗口的父窗口中隐藏一个iframe,下载的地址指向这个iframe.

  • javascript 弹出的窗口返回值给父窗口具体实现

    直接上代码,有些地方可以用到: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME=&qu

  • JS子父窗口互相操作取值赋值的方法介绍

    $("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementByIdx_x("父窗口元素ID"): 取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document); 类似的,取其它窗口的方法大同小异$(se

  • JS刷新父窗口的几种方式小结(推荐)

    浮层内嵌iframe及frame集合窗口,刷新父页面的多种方法 <script language=JavaScript> parent.location.reload(); </script> <script language=JavaScript> parent.location.reload(); </script> 弹出子页面 <script language=JavaScript> window.opener.location.reloa

  • JS与jQuery实现子窗口获取父窗口元素值的方法

    JS与jQuery实现子窗口获取父窗口元素值的方法

    本文实例讲述了JS与jQuery实现子窗口获取父窗口元素值的方法.分享给大家供大家参考,具体如下: 功能描述:父窗口有一个input,和一个button ,点击button打开子窗口,在子窗口中获取父窗口中input的值,并显示. js: 父窗口: <input type="text" name="currentProjectIDForDetail" id="currentProjectIDForDetail" disabled="

  • js 父窗口控制子窗口的行为-打开，关闭，重定位，回复

    测试的时候,注意当前目录中,有代码中的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&

随机推荐