JavaScript父子窗体间的调用方法

 更新时间:2015年03月31日 09:44:32   作者:xugang  
这篇文章主要介绍了JavaScript父子窗体间的调用方法,涉及javascript调用窗体的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

如果要打开一个新窗口,使用 window.open( ) 方法。

如果要关闭自身窗口,使用 window.close( ) 方法。

一、父窗体

为了便于父窗口操作子窗口,可以为 window.open( ) 方法定义一个变量,例如:

var opW = window.open("tests.html","popup","width=300,height=300");

这样,要关闭子窗口可直接使用:opW.close( ) 方法。

如果父窗体要操作子窗口元素,代码如下:

复制代码 代码如下:
opW.document.getElementById("fartherWindowTxt").innerHTML = "操作子窗口";

二、子窗体

子窗口可以使用window.opener 来引用父窗口,代码如下:

复制代码 代码如下:
window.opener.document.getElementById("fartherWindowTxt").innerHTML= "子窗口操作父窗口!";

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

相关文章

  • 浅谈javascript中执行环境(作用域)与作用域链

    浅谈javascript中执行环境(作用域)与作用域链

    本文主要介绍了javascript中执行环境(作用域)与作用域链,并在文章结尾处做出了总结,感兴趣的朋友可以看下
    2016-12-12
  • js控制表单不能输入空格的小例子

    js控制表单不能输入空格的小例子

    这篇文章主要介绍了js控制表单不能输入空格的小例子,有需要的朋友可以参考一下
    2013-11-11
  • UniApp使用vue.config.js进行配置的详细教程

    UniApp使用vue.config.js进行配置的详细教程

    这篇文章主要给大家介绍了关于UniApp使用vue.config.js进行配置的详细教程,uniapp是一套基于Vue语法的框架,同样也支持Vue.config.js配置,一般常用的莫过于路径的名称,需要的朋友可以参考下
    2023-10-10
  • JavaScript canvas实现流星特效

    JavaScript canvas实现流星特效

    这篇文章主要为大家详细介绍了JavaScript canvas实现流星特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Bootstrap精简教程中秋大放送

    Bootstrap精简教程中秋大放送

    Bootstrap精简教程中秋大放送,这篇文章主要为大家分享了最基础的Bootstrap学习教程,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • JS跳出循环的方法区别对比分析(break,continue,return)

    JS跳出循环的方法区别对比分析(break,continue,return)

    面向对象编程语法中我们会碰到break ,continue, return这三个常用的关键字,那么关于这三个关键字的使用具体的操作是什么呢?接下来通过本文给大家讲解JS跳出循环的方法区别对比分析(break,continue,return),感兴趣的朋友一起看看吧
    2023-02-02
  • javascript中Array数组的迭代方法实例分析

    javascript中Array数组的迭代方法实例分析

    这篇文章主要介绍了javascript中Array数组的迭代方法,实例分析了Array数组的迭代方法定义与使用技巧,需要的朋友可以参考下
    2015-02-02
  • js文本框输入内容智能提示效果

    js文本框输入内容智能提示效果

    这篇文章主要介绍了js文本框输入内容智能提示效果,非常简单实用,需要的朋友可以参考下
    2015-12-12
  • 微信小程序的线程架构【推荐】

    微信小程序的线程架构【推荐】

    这篇文章主要介绍了微信小程序的线程架构,每个小程序包含一个描述整体程序的app实例和多个描述页面的page,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • typescript配置alias的详细步骤

    typescript配置alias的详细步骤

    这篇文章主要介绍了typescript配置alias,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08

最新评论