JavaScript——window对象

最新推荐文章于 2024-01-03 12:34:29 发布
最新推荐文章于 2024-01-03 12:34:29 发布
阅读量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对象详解
大河之犬的博客
10-07 5824
对于window对象，无论是它的属性，还是方法，都可以省略window前缀。如window.alert()可以简写为alert(),window.open()可以简写为open()，甚至window.document.getElementById()可以简写为document.getElementById()，以此类推。在JavaScript中，窗口常见的操作有两种：一种是“打开窗口”，另一种是“关闭窗口”。在线时钟中，秒针每隔一秒转一次。输入内容，然后点击对话框中的【确定】按钮，就会返回刚刚输入的文本。
window对象
weixin_52589346的博客
06-02 676
一、window对象 1.窗口位置 1.screenLeft:返回浏览器窗口相对于屏幕左上角的水平距离，不兼容FF浏览器 2.screenTop:返回浏览器窗口相对于屏幕左上角的垂直距离，不兼容FF浏览器 3.screenX：功能同于screenLeft，兼容FF 4.screenY：功能同于screenTop，兼容FF 2.窗口大小（IE9以下不兼容） 1.innerWidth：返回网页在当前窗口中可见的部分宽度，包含滚动条宽度 2.innerHeight：返回网页在当前窗口中可见的部分高度，包含滚动条宽
JavaScript浏览器对象之window对象详解
上善若泪
05-06 8471
目录 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...
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`...
js window对象
weixin_63825009的博客
09-05 461
1.1 window对象的应用 1.2 三种弹出框 1.3 窗体控制 1.4 窗体滚动 1.5 窗体打印 1.6 定时器 1.7 window对象常用属性
JavaScript窗口（window）对象介绍
算法与编程之美
07-29 4694
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！引言windo...
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基础——window对象（screen、history、location、navigator、window对象常用方法、window对象常用事件）
ranran0306的博客
04-21 1771
javascript基础——window对象（screen、history、location、navigator、window对象常用方法、window对象常用事件）
Window对象
weixin_45773069的博客
08-06 371
BOM（浏览器对象模型） BOM是浏览器对象模型 window是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的 window 对象下包含了 navigator 、 location 、 document 、 history 、 screen 5个属性，即所谓的ВОМ（浏览器对象模型） document 是实现 DOM 的基础，它其实是依附于 window 的属性。 注：依附于 window 对象...
【JS逆向】【10.JavaScript 基础语法】BOM - 浏览器对象window，常用属性方法，窗口操作，对话框，定时器，Navigator对象，location对象，（详细讲解）
最新发布
weixin_43612602的博客
01-03 1270
浏览器对象 window 1. window 对象概述 2. window 对象的属性 window.name widnow.innerHeight，window.innerWidth window.pageXOffset，window.pageYOffset iframe screen 对象 Navigator 对象 Navigator.userAgent navigator.plugins location 对象 history对象 go() back() foreward() history.push
javascript学习之window 对象
白话机器学习
08-04 476
浏览器里面，window对象（注意，w为小写）指当前的浏览器窗口。它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属。一个变量如果未声明，那么默认就是顶层对象的属性。a = 1;上面代码中，a是一个没有声明就直接赋值的变量，它自动成为顶层对象的属性。window有自己的实体含义，其实不适合当作最高一层的顶层对象，这是一个语言的设计失误。最早，设计这门语言的时候，原始设想是语言内置的对象越少越好，这样可以提高浏览器的性能。因此，语言设计者 Brendan Eich 就把window。
前端开发：JS中的Window对象详解
软贱开发攻城狮
09-19 4279
在前端开发过程中，关于全局对象的使用是非常常用的，其实每个JS环境中都一个全局对象，尤其是在实际开发过程中全局范围内创建任何变量都是这个全局对象的属性，且任何函数都是它的方法。在实际浏览器环境下，Window对象就是全局对象的标志，它表示包含网页的浏览器窗口。那么本篇文章就来分享一下关于window对象相关的知识点，方便查阅使用。
javascript2--函数和Windows对象
2301_76964036的博客
03-24 119
有返回值：方法体内通过return关键字返回返回值，可用变量接收返回值。无返回值：方法体内没有return关键字，如果用变量接收返回值，接收的是undefined。匿名函数：没有名字的函数。回调函数：你定义的，你没有调用，但最终它执行了（在某个时刻或某个条件下）。自调函数：函数定义完，立即调用执行(一般用于该函数只使用一次的情况下)。
浏览器中的JavaScript核心BOM（浏览器对象模型）重点掌握对象之Window对象的属性与方法
零一的博客
06-06 3066
浏览器中常用内置对象之Window引言正文一、Window对象的方法（1）计时器（2）打开窗口和关闭窗口二、Window对象的属性 引言 我们从这一篇开始逐个讲解浏览器上的内置对象的属性和方法。常见的浏览器内置对象有：Window 、Location 、Navigator 、History 、Screen…… 本篇文章，我们就从最大的对象Window开始讲起 正文 Window对象在客户端JavaScript中扮演着核心的角色，它是客户端的一个全局内置对象。我们可以使用 window 来引用这个对象，比如当
window对象是干什么的？底层原理是什么？
长风破浪会有时的博客
05-30 174
对象是JavaScript中的全局对象，它代表了整个浏览器窗口或标签页。它提供了与浏览器窗口和文档相关的属性和方法，以及访问全局作用域中定义的其他对象和函数的能力。对象提供了许多方法来操作浏览器窗口和标签页，例如打开新窗口或标签页、关闭当前窗口、改变窗口尺寸、滚动窗口等。对象是浏览器提供的API的入口点，通过它可以访问浏览器的各种功能和特性。对象是JavaScript全局环境的一个接口，它提供了与浏览器窗口和文档交互的能力。对象提供了方法来获取和设置浏览器地址栏中的URL，以及导航到不同的URL。
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、付费专栏及课程。

余额充值