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

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

  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日

相关文章

  • js中document.getElementByid、document.all和document.layers区分介绍

    下面是关于“js中document.getElementByid、document.all和document.layers区分介绍”的完整攻略。 一、介绍 在 JavaScript 中,用于访问和操作 HTML 页面中的元素的常见的方式有三种:document.getElementByid、document.all和document.layers。它们分别代…

    JavaScript 2023年6月10日
    00
  • JS中Location使用详解

    JS中Location使用详解 概述 Location是一个包含当前URL相关信息的对象,它是浏览器原生提供的全局对象。使用Location对象可以获取当前URL、跳转页面、刷新页面、修改URL等操作。 Location的属性 href 用于获取或者设置当前页面的完整URL。 示例: console.log(location.href); // 输出当前页面…

    JavaScript 2023年6月11日
    00
  • js中关于String对象的replace使用详解

    String对象的replace方法是JavaScript中用于替换字符串中指定字符或字符串的方法。该方法可以接受一个正则表达式或字符作为第一个参数,并将其替换成给定的字符串。以下是关于该方法的详细讲解: 基本语法 replace方法的基本语法如下: string.replace(searchValue, replaceValue); 其中,string 是…

    JavaScript 2023年5月27日
    00
  • Javascript基础之数组的使用

    Javascript基础之数组的使用 什么是数组? 数组是Javascript中的一种数据结构,用于存储多个相同类型的数据。一个数组可以包含任意数量的元素,且这些元素可以是数字、字符串、对象、甚至另一个数组。 如何声明一个数组? 声明一个数组的语法是 [],可以选择性地在中括号内包含多个元素。例如: var fruits = [‘apple’, ‘banan…

    JavaScript 2023年5月28日
    00
  • JavaScript中的”=、==、===”区别讲解

    当我们使用JavaScript进行开发的时候,经常需要判断两个变量是否相等或者给一个变量赋值,这时我们就需要使用到 =、== 以及 === 这些操作符。这里我们就来详细讲解一下它们的区别与应用。 = 赋值操作符 在JavaScript中,单个等号(=)表示将右侧的值赋给左侧的变量。例如下面的代码将数值1赋给变量x: var x; x = 1; == 相等操作…

    JavaScript 2023年5月17日
    00
  • 如何利用JS实现时间轴动画效果

    下面是详细的“如何利用JS实现时间轴动画效果”的攻略。 1. 确定实现目标 在开始编写JS代码前,首先需要明确实现的时间轴动画效果,例如时间轴的布局样式、时间点的标记形式、动画效果等。明确实现目标有助于后续的编码过程,避免出现不必要的错误。 2. 构建HTML结构 在HTML中构建出时间轴的基本结构,例如采用<ul>和<li>元素表示…

    JavaScript 2023年5月27日
    00
  • 浅谈js中字符和数组一些基本算法题

    下面我将为您详细讲解“浅谈js中字符和数组一些基本算法题”的完整攻略。 确定字符串中的唯一字符 题目描述 给定一个字符串,编写一个函数来确定它是否是该字符串的某个字符的排列之一。例如,输入“abc”和“cba”,你应该返回true,但是如果输入“abc”和“def”,则应按false。 解决方案 一个字符串是另一个字符串的排列之一,意味着它们都由相同的字符组…

    JavaScript 2023年5月28日
    00
  • jQuery表单验证之密码确认

    本文将为您提供简明易懂的jQuery表单验证之密码确认攻略。我们将提供完整的步骤和示例说明,帮助您解决表单验证过程中的疑难问题。 步骤一:引入jQuery库和验证插件 首先,您需要引入jQuery库和验证插件,以便您可以轻松地在网站上进行表单验证。您可以在以下位置找到jQuery库和验证插件: <script src="https://cod…

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