JavaScript——window对象

最新推荐文章于 2024-04-05 15:02:55 发布
最新推荐文章于 2024-04-05 15:02:55 发布
阅读量1k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ym01213/article/details/79756665
版权

本节目标：

    掌握window对象的操作方法

window对象

在使用JS打开窗口或关闭窗口时，或者做一些比较特殊的效果时，需要使用window对象。

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <script type="text/javascript">
function fun(thisurl){
window.open(thisurl);
}
  </script>
 </head>
 <body οnlοad="fun('test.html')">
 </body>

</html>

如上，在加载一个页面时，打开另一个窗口。

打开新窗口操作：

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <script type="text/javascript">
function fun(thisurl){
window.open(thisurl,"页面标题","width=470,heigth=150,scrollbars=yes,resizeable=no");
        }
  </script>
 </head>
 <body>
<form method="post" action="" name="myForm">
网址：<select name="url" οnchange="fun(this.value)">
<option value="test1.html">test1</option>
<option value="test2.html">test2</option>
</select>
</form>
 </body>

</html>

提示确认操作：

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <script type="text/javascript">
function fun(){
if(window.confirm("确定删除？")){
alert("删除成功");
}else{
alert("取消");
}
}
  </script>
 </head>
 <body>
<a href="#" οnclick="fun()">删除邮件</a>
 </body>

</html>

页面重定向操作：

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <script type="text/javascript">
function fun(thisurl){
window.location=thisurl;
}
  </script>
 </head>
 <body>
<form method="post" action="" name="myForm">
<select οnchange="fun(this.value)">
<option value="#">===请选择===</option>
<option value="test1.html">test1.html</option>
<option value="test2.html">test2.html</option>
</select>
</form>
 </body>

</html>

在window对象之间也存在父子关系，通过一个窗口打开另一个窗口，那么原本的窗口被称为父窗口，被打开的窗口称为子窗口。


父窗口：

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <script type="text/javascript">
function fun(thisurl){
window.open(thisurl,"页面标题","width=470,heigth=150,scrollbars=yes,resizeable=no");
}
  </script>
 </head>
 <body>
<form method="post" action="" name="parentForm">
<input type="button" value="打开" onClick="fun('test1.html')"><br>
</form>
 </body>
</html>

子窗口test1.html：

<html lang="en">

 <head>
  <meta charset="UTF-8">
  <script type="text/javascript">
function closewin(){
window.close();
}
window.opener.reload();//刷新页面
  </script>
 </head>
 <body>
  <a href="" οnclick="closewin()">关闭窗口</a>
 </body>
</html>

从子窗口中接收数据到父窗口中：

父窗口：

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <script type="text/javascript">
function fun(thisurl){
window.open(thisurl,"页面标题","width=470,heigth=150,scrollbars=yes,resizeable=no");
}
  </script>
 </head>
 <body>
<form method="post" action="" name="parentForm">
<input type="button" value="打开" onClick="fun('test1.html')"><br>
选择的结果是：<input type="text" name="result">
</form>
 </body>
</html>

子窗口：

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <script type="text/javascript">
function returnVal(){
var city = document.myForm.city.value;//取出当前选择的信息
var doc = window.opener.document;//取得父窗口文档
doc.parentForm.result.value = city;//设置新内容
window.close();
}
  </script>
 </head>
 <body>
  <form method="post" action="" name="myForm">
选择：<select name="city">
<option value="#">===请选择===</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
  </select>
  <input type="button" value="返回" οnclick="returnVal()">
  </form>
 </body>
</html>

Devin01213
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS Window对象的属性和方法
songhongrun2010的专栏
01-04 1778
Window 对象属性 属性 描述 IE F O closed 返回窗口是否已被关闭。 4
HTML BOM(window对象的总结)
ZiXiaweb的博客
09-13 1046
什么是BOM？ BOM，Browser Object Model 即浏览器对象模型。浏览器页面初始化时，会在内存创建一个全局对象，用来描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型。 不同于DOM的标准化组织是W3C，JavaScript的语法标准化组织是ECMA，BOM没有官方标准，对于现代浏览器，每个浏览器都有自己的BOM实现方法，所以直接使用BOM会有兼容性问题。 BOM包含哪些内容? BOM有一个核心对象window，window对象包含了6大核心模块，分别是： document对象
Node.js 全局对象介绍
昆吾kw的博客
02-03 622
在学习 Javascript 之初，会接触一个概念：JS 由三部分组成，。其中前两者是宿主环境，也就是浏览器所提供的能力。后者才是 JS 语言本身的标准。在上篇文章中，提到了，所以学习 Node.js 时，除了我们已经掌握的 JS 基础功底，还要了解 Node.js 宿主环境提供的一些能力。
javascript学习之window 对象
白话机器学习
08-04 475
浏览器里面，window对象（注意，w为小写）指当前的浏览器窗口。它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属。一个变量如果未声明，那么默认就是顶层对象的属性。a = 1;上面代码中，a是一个没有声明就直接赋值的变量，它自动成为顶层对象的属性。window有自己的实体含义，其实不适合当作最高一层的顶层对象，这是一个语言的设计失误。最早，设计这门语言的时候，原始设想是语言内置的对象越少越好，这样可以提高浏览器的性能。因此，语言设计者 Brendan Eich 就把window。
JS window对象详解
大河之犬的博客
10-07 5747
对于window对象，无论是它的属性，还是方法，都可以省略window前缀。如window.alert()可以简写为alert(),window.open()可以简写为open()，甚至window.document.getElementById()可以简写为document.getElementById()，以此类推。在JavaScript中，窗口常见的操作有两种：一种是“打开窗口”，另一种是“关闭窗口”。在线时钟中，秒针每隔一秒转一次。输入内容，然后点击对话框中的【确定】按钮，就会返回刚刚输入的文本。
Node.js全局对象
m0_51281306的博客
04-07 1589
Node.js 初体验 在命令行工具中通过 node JavaScript 文件 的方式执行代码。 function sayHello (name) { console.log('Hello' + name) } 1.6 全局对象 console.log(window) // window is not defined 在 Node.js 环境中是没有 window 的，所以 window 对象自然是未定义的。 在 Node.js 环境中全局对象为 global，在 glo
JavaScript中的window对象详解
热门推荐
weixin_45819386的博客
09-09 1万+
1.window对象简介 （1）在JavaScript中，一个浏览器窗口就是一个window对象。 （2）一个窗口就是一个window对象，这个窗口里面的HTML文档就是一个document对象，document对象是window对象的子对象。 window对象的子对象分很多种： 子对象 说明 document 文档对象用于操作页面元素 location 地址对象用于操作URL地址 navigator 浏览器对象用于获取浏览器版本信息 history 历史对象用于操作浏览器历
JavaScript——DOM操作——Window.document对象详解
10-21
下面小编就为大家带来一篇JavaScript——DOM操作——Window.document对象详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
精通JavaScript（文档对象模型和事件驱动——window对象）
03-07
为了能够操纵浏览器和文档，JavaScript使用分层的父对象和子对象，这就是“文档对象模型”。这些对象的组织类似一个树型结构，并表示一个Web文档的所有内容和组件。 注意：”文档对象模型”不是JavaScript语言的一...
Javascript window对象详解
12-09
所以，`Window`包含了浏览器实现的API，如`sessionStorage`，并且它有一个`window`属性，该属性引用了`Window`实例化的对象——即`window`。另一方面，`window`是一个可以直接操作的对象，它的属性和方法可以直接...
Javascript高级编程学习笔记27——BOM1window对象1.docx
07-05
BOM的核心是`window`对象，它既是JavaScript访问浏览器功能的接口，同时也是JavaScript的全局对象。这意味着像`parseInt`这样的全局方法，在浏览器环境中其实是`window`对象的方法。同样，全局变量也会成为`window`...
JavaScript浏览器对象之window对象详解
上善若泪
05-06 8454
目录 1 window对象概述 2 window对象的属性 2.1 window.name属性 2.2 window.innerHeight属性，window.innerWidth属性 2.3 window.pageXOffset属性，window.pageYOffset属性 2.4 iframe元素 2.5 Navigator对象 2.5.1 Navigator.userAgen...
node环境使用安装jsdom，nodejs执行带有window对象的代码。
m0_58204947的博客
03-13 3074
3，安装 jsdom ，以下是全局安装 jsdom （可在任意地方调用 jsdom ，不局限于执行安装命令时的路径）2，在环境变量中添加 NODE_PATH 变量，值为上述 node 模块全局路径。安装完成后，在js代码头部添加;
细说JavaScript BOM之window对象
zhishunet
01-17 1183
window对象是JavaScript中最大的对象，其他对象都是window对象的一部分，window对象表示浏览器的一个实例，在浏览器中它有双重身份，既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript标准中规定的Globel(全局)对象。第二个身份说明了我们在网页中定义的任何一个变量、函数和对象都会以window作为其全局对象。window对象是全局对象，因此所有在全局作用域中声明的变量、函数、对象都会变成window对象的属性、方法、对象 基于window对象是全局对象的概念
HTML5权威指南——使用window对象
gyypwrs的博客
12-06 1584
1.获取window对象 获取window对象有两种方式一个是document.defaultView,一种是全局变量window var width = window.outerWidth var height = document.defaultView.height 2.获取窗口信息 特别的是window.screen对象还有以下几个属性值 3.与窗口进行交互 谨慎使用以下的几个功能吧，窗口的控制应该由用户来决定 4.对用户进行提示 对用户进行提示的这几个方法我好像在学之初都用过，就
详解HTML中的window对象和document对象
诸葛苍穹
04-16 1660
Window -- 代表浏览器中一个打开的窗口： 对象属性 　　window //窗口自身 　　window.self //引用本窗户window=window.self 　　window.name //为窗口命名 　　window.defaultStatus //设定窗户状态栏信息 　　window.location //URL地址，配备布置这个属性可以打开新的页面 对象方法 　　window.a
关于window对象，熬夜整理最全面的HTML字符实体
最新发布
2301_78850344的博客
04-05 882
资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。[外链图片转存中…(img-q33gs83I-1712300527540)][外链图片转存中…(img-I06JMXAl-1712300527540)]资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
【Nodejs 】Nodejs 概述及常见的全局对象_01
青春木鱼的博客
04-28 3275
全局对象是什么？Node. js 有哪些全局对象？在浏览器JavaScript中，通常window是全局对象， 而Nodejs中的全局对象是global。在NodeJS里，是不可能在最外层定义一个变量，因为所有的用户代码都是当前模块的，只在当前模块里可用，但可以通过exports对象的使用将其传递给模块外部，所以，在NodeJS中，用var声明的变量并不属于全局的变量，只在当前模块生效。真正的全局对象：常见的全局对象有global、console、process、Buffer等等
JavaScript窗口（window）对象介绍
算法与编程之美
07-29 4686
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！引言windo...
JavaScript Window对象：frames数组深入解析
本文档是关于JavaScript编程中的一个关键概念——Window对象的frames数组对象，由高罗峰教授讲解。Window对象在JavaScript中扮演着核心角色，特别是对于处理HTML页面中的帧标签（frameset和iframe）。frames数组对象...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值