当前位置: 首页 > news >正文

javascript中 window 相关知识点以及代码演示

一.了解window

在JavaScript中,window对象是浏览器的全局对象,它不仅代表了浏览器窗口,同时也充当了ECMAScript中的Global对象的角色。因此,深入了解和掌握window对象的属性和方法对于JavaScript开发者来说至关重要
以下内容将依次介绍window对象的一些主要特性,并提供相应的代码演示。

二.控制窗口大小和位置

1.基本概念

window对象提供了对浏览器窗口尺寸和位置的控制与访问。通过window.innerWidth、window.innerHeight可以获取窗口的内部宽度和高度(即可视区域),而window.outerWidth、window.outerHeight则包含了工具栏和滚动条的外部宽度和高度

2.代码演示

// 打印窗口的内部和外部尺寸
console.log("内部宽度: " + window.innerWidth);
console.log("内部高度: " + window.innerHeight);
console.log("外部宽度: " + window.outerWidth);
console.log("外部高度: " + window.outerHeight);

三.打开和关闭窗口

1.基本概念

使用window.open()方法可以打开一个新的浏览器窗口或标签页,而window.close()则用于关闭当前窗口或标签页。

2.代码演示

// 打开一个新的窗口
var newWindow = window.open("https://www.example.com");// 关闭当前窗口
window.close();

四.定时器函数

1.基本概念

**setTimeout()setInterval()方法允许在指定的时间后或者周期性地执行某段代码。同时,可以使用clearTimeout()clearInterval()**来取消延迟执行或周期性执行的代码。

2.代码演示

// 设置一个5秒后执行的定时器
var timeoutId = setTimeout(function() {console.log("5秒后执行");
}, 5000);// 设置一个每2秒重复执行的定时器
var intervalId = setInterval(function() {console.log("每2秒执行一次");
}, 2000);// 清除定时器
clearTimeout(timeoutId);
clearInterval(intervalId);

五.弹出对话框

1.基本概念

window.alert()、**window.confirm()window.prompt()**方法分别用于显示警告框、确认框和提示框。这些对话框可以用于与用户交互,例如获取输入或通知信息。

2.代码演示

// 显示警告框
window.alert("这是一个警告框");// 显示确认框
var result = window.confirm("请确认操作");
console.log("用户选择: " + (result ? "确定" : "取消"));// 显示提示框并获取输入
var name = window.prompt("请输入您的名字", "知数SEO");
console.log("用户输入: " + name);

六.获取和设置窗口URL

1.基本概念

window.location属性提供了当前页面的URL信息,并且可以用来改变当前页面的URL。

2.代码演示

// 获取当前页面的URL
console.log("当前页面的URL: " + window.location.href);// 更改当前页面的URL(假设在同一域名下)
window.location.href = "newpage.html";

七.历史记录

1.基本概念

window.history对象提供了对浏览器会话历史的访问,允许无刷新地浏览网页。

2.代码演示

// 后退
window.history.back();// 前进
window.history.forward();// 跳转到历史记录的第3个记录页
window.history.go(3);
http://www.lryc.cn/news/416809.html

相关文章:

  • 企业社会责任(CSR)国际标准有哪些?
  • The C programming language (second edition,KR) exercise(CHAPTER 7)
  • 面向服务架构(SOA)介绍
  • 关于使用Next遇到的一些新特性
  • Python 爬虫入门(七):requests 库的使用「详细介绍」
  • 两端约束的最优控制问题及其数值解法
  • 电磁仿真--基本操作-CST-(6)-导线周围磁场
  • 用Java手写jvm之模拟方法调用指令invokexxx和方法返回指令xreturn
  • 自定义枚举类型检查
  • 探索四川财谷通抖音小店:安全与信赖的购物新体验
  • systemd-manage系统服务图形化管理工具使用教程
  • 移除元素(LeetCode)
  • 代码随想录27期|Python|Day38|509斐波那契|738.爬楼梯|746.746. 使用最小花费爬楼梯
  • windows docker容器部署前端项目
  • 科普文:微服务之全文检索ElasticSearch 集群的搭建
  • QtObject是干什么的?
  • 锐捷RCNA | 远程登录与路由技术
  • 实现Vue-tiny-diff算法
  • 正则表达式测试工具
  • Github 2024-08-02 开源项目日报 Top9
  • 重生之我 学习【数据结构之顺序表(SeqList)】
  • 前端day4-表单标签
  • vue3-print-nb 表格打印分页,第一页有空白的情况出现解决方法(两种:一种原生,一种基于element表格)
  • 搜维尔科技:借助 Xsens中的远程人体录制功能,可以在任何位置以无限量同时捕捉无限数量演员的身体动作
  • 2024/08 近期关于AI的阅读和理解[笔记]
  • SmartEDA:解锁设计新境界,从工具到灵感的飞跃之旅!
  • 解决Minizip压缩后解压时的头部错误问题
  • 数据库表水平分割和垂直分割?
  • Linux源码阅读笔记18-插入模型及删除模块操作
  • 力扣面试经典算法150题:移除元素