javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例

yizhihongxing

针对这个话题,我将给出完整的攻略,包含如下内容:

  1. showModalDialog传值的示例说明

  2. window.open父子窗口传值的示例说明

  3. 相关代码和详细解析

1. showModalDialog传值的示例说明

showModalDialog是JavaScript中的一个对话框方法,使用它我们可以打开模态对话框,将父窗口传入的值传递给子窗口。下面给出具体的例子:

//在父窗口中打开模态对话框
var returnValue = showModalDialog('ChildWindow.html', 'dialogWidth:400px;dialogHeight:300px');

//子窗口获得传入的值
alert(returnValue);

通过这段代码,我们打开名为"ChildWindow.html"的子窗口,并设置了其大小,该窗口会在父窗口之上,直到关闭该窗口才会重新启用父窗口。当关闭该窗口时,showModalDialog方法返回一个returnValue,也就是子窗口传递回来的字符串值。在本例中,该值会在父窗口中弹出一个对话框框显示。

2. window.open父子窗口传值的示例说明

相较于showModalDialog方法,window.open方法是打开常规的子窗口,最常见的应用就是新窗口打开网页。下面是一个利用window.open方法打开子窗口,并向子窗口传递值的例子:

//在父窗口中打开子窗口
var childWindow = window.open('ChildWindow.html', 'childWindowName');

//传递值给子窗口
childWindow.myValue = 'Hello World!';

//在子窗口中读取值
var myValue = window.opener.myValue;

//将值显示在子窗口中
alert(myValue);

该例中,我们使用window.open方法在父窗口中打开"ChildWindow.html"的子窗口,并给子窗口命名为"childWindowName"。接着,我们将字符串"Hello World!"赋值给新窗口的myValue属性。在子窗口中,我们使用window.opener访问响应的父窗口(即打开的窗口)对象,并通过myValue属性获得传入的值。

3. 相关代码和详细解析

以上两个例子都是很常见的,而window.open方法的应用范围更广,所以我们重点对window.open方法进行解析。

在window.open的第一个参数中,我们可以指定要打开的网页的URL,如果URL是相对路径的话,会从当前路径开始解析。第二个参数是打开网页的窗口的名称,如果该名称已被使用,相应的网页会在原有窗口中打开。在第三个参数中,我们可以设置一个字符串列表,指定可能要用到的新窗口的一些特征,比如新窗口的大小、是否显示滚动条等等。

我们可以在新窗口中为子窗口对象赋任何属性,如myValue属性,在父窗口中可以通过

var myValue = window.opener.myValue;

来访问。值得注意的是,虽然我们可以改变使用window.opener获得的父窗口对象的属性,但我们不应该改变窗口本身或其中的DOM元素。这样做容易引起一些难以追踪的错误。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 详解JavaScript实现监听路由变化

    那么就让我来详细讲解一下“详解JavaScript实现监听路由变化”的完整攻略吧。 一、引言 当我们使用现代化 JavaScript 框架时,我们通常需要动态地更新页面视图以匹配 URL 路径中的路由而不进行任何页面重新加载。这就是我们需要路由监听的原因,以更新浏览器 URL 的时候同时不需要全量渲染页面。在本文中,我们会一起探讨如何实现 JavaScrip…

    JavaScript 2023年5月27日
    00
  • Java关键字之this用法详解

    Java关键字之this用法详解 1. 简介 this 是 Java 语言中的一个关键字,表示当前对象,一般情况下指代的是当前实例。在 Java 中大量使用 this 引用。 this 可以用来调用一个类的构造函数,也可以用来调用类成员变量或成员方法。 2. this 用法 2.1. 用于调用类的构造函数 在 Java 中, this 可以用于引用一个类的构…

    JavaScript 2023年5月19日
    00
  • 基于js实现逐步显示文字输出代码实例

    下面详细讲解一下基于js实现逐步显示文字输出的完整攻略。 1. 确定需求 在实现逐步显示文字的功能之前,首先需要确定需求。通常情况下,逐步显示文字的实现一般用于网站教程或者精美页面展示的文本展现,以吸引用户的注意,并且可以让用户有序地看到文本的信息,避免一次性将所有信息展现给用户,造成信息过载。 因此,在实现逐步显示文字的功能之前要先确认以下需求: 显示的文…

    JavaScript 2023年5月28日
    00
  • JS判断表单输入是否为空(示例代码)

    JS判断表单输入是否为空是前端开发中常用的一种技巧,可以通过JS代码来判断用户是否填写了表单输入框,从而提高用户体验和数据输入的准确性。下面将详细讲解如何使用JS判断表单输入是否为空,以及一些示例代码和注意事项。 判断表单输入是否为空 JS判断表单输入是否为空的核心代码如下所示: var input = document.getElementById(&qu…

    JavaScript 2023年6月10日
    00
  • JS中使用Array函数shift和pop创建可忽略参数的例子

    下面是JS中使用Array函数shift和pop创建可忽略参数的攻略。 前言 在JS中使用数组函数shift和pop时,我们经常会遇到需要忽略某些参数的情况。这时,我们可以使用类似es6中的解构赋值,通过逗号分隔符来创建可忽略参数。 shift函数示例 shift函数通过删除数组的第一个元素,返回该元素值。我们可以通过shift函数来模拟创建可忽略参数的方式…

    JavaScript 2023年5月27日
    00
  • JavaScript定时器常见用法实例分析

    下面就为大家详细讲解“JavaScript定时器常见用法实例分析”的完整攻略。 定时器的基本用法 定时器是JavaScript中的一个重要概念,它允许我们在一段时间之后执行代码。以下是定时器的基本用法示例: // 1秒后弹出提示框 setTimeout(function() { alert("Hello World!"); }, 1000…

    JavaScript 2023年6月10日
    00
  • js异步上传多张图片插件的使用方法

    这里为大家提供一份“js异步上传多张图片插件的使用方法”的攻略,包含插件的基本介绍、使用方法以及示例说明。 1. 插件介绍 该插件是一款支持异步上传多张图片的JavaScript插件,使用该插件可以方便地实现多张图片的上传及预览等操作。 该插件的基本特点如下: 支持多张图片上传; 支持图片预览功能; 支持图片排序功能。 2. 使用方法 使用该插件需要引入jQ…

    JavaScript 2023年6月11日
    00
  • JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)

    现在我将详细讲解 JavaScript 中 charCodeAt 方法的使用,以及使用该方法取得指定位置字符的 Unicode 编码的完整攻略。 什么是 charCodeAt 方法? charCodeAt 方法是 JavaScript String 对象的一个方法,它用来返回字符串中指定位置的字符的 Unicode 编码值。它的语法格式如下: str.cha…

    JavaScript 2023年5月20日
    00
合作推广
合作推广
分享本页
返回顶部