作为开发人员，你需要知道的浏览器原生属性和知识

本文链接：https://blog.youkuaiyun.com/Android_boom/article/details/129315038

文章介绍了浏览器的一些原生属性和事件，如window.innerWidth/innerHeight用于获取可视窗口大小，resize事件在尺寸改变时触发，load事件在页面完全加载后执行，以及scroll事件和scrollTo()方法在滚动操作中的应用。此外，还提到了浏览器跨域解决方案和调试工具的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

作为前端开发人员，浏览器是我们接触最多的工具了。浏览器自带的功能有很多，浏览器最基本的作用就是浏览网页了，对开发人员而言，还可以使用浏览器来调试代码，查看网页加载过程，获取网页请求。总之，浏览器是一个很重要的工具。

那么，我们对浏览器的原生属性和知识又了解多少呢？这里我收集并整理了一些浏览器的原生知识，关于这些浏览器知识都基于react项目以及HTML页面做了相关实操测试，所以大家可以边看边操作，这样效果会更佳。

浏览器原生属性

浏览器的可视窗口大小

window.innerWidth和window.innerHeight可以获取浏览器的可视窗口大小，这个属性在项目中经常能被使用到，所以可以重点关注。下面是我在React项目中简单使用了该属性。

import React from "react";
function App() {console.log('浏览器可视宽度 : ', window.innerWidth, innerWidth);console.log('浏览器可视高度 : ', window.innerHeight, innerHeight)return (<div className="App"></div>);
}
export default App;

浏览器后台打印如下：

浏览器的常见事件

浏览器有很多事件，比如加载事件，滚动事件等，也是十分常见的。

resize 尺寸改变事件

resize的运用场景就太多了。最基本的就是当浏览器页面可视窗口尺寸改变的时候，就会触发。

<!DOCTYPE html>
<html lang="en">
<head><title>尺寸改变事件</title>
</head>
<body><script> window.onresize = function () { console.log('尺寸改变了') } </script>
</body>
</html>

load 加载事件

当我们把JS代码写在head标签内的时候, 并且操作了页面元素，这时候可以加上一个window.onload事件

当页面中所有外部资源(包括HTML, CSS, JS, 图片, 音视频等) 全部加载完毕后触发。但是我们需要注意，这种只能绑定一个事件处理函数。如果我们写了两个事件处理函数, 那么只会执行后面一个。

<!DOCTYPE html>
<html lang="en">
<head><title>加载事件</title>
</head>
<body><script> window.onload = function () {console.log('页面全部加载完毕了')} </script>
</body>
</html>

后台打印如下：

scroll 滚动事件

顾名思义，scroll的中文意思是滚动。当浏览器页面的滚动条滚动的时候可以触发该事件。

<!DOCTYPE html>
<html lang="en">
<head><title>滚动事件</title>
</head>
<body><script> window.onscroll = function () { let scrollTop = document.documentElement.scrollTop || document.body.scrollTop console.log(scrollTop) } </script>
</body>
</html>

浏览器滚动

scrollTo() 方法可把内容滚动到指定的坐标。可能这样不太直观，直接看例子吧，相关代码如下：

<!DOCTYPE html>
<html lang="en">
<head><style> body {width: 2000px;height: 2000px;}#btn {position: fixed;right: 100px;bottom: 100px;} </style>
</head>
<body><button id="btn">滚动</button><script> btn.onclick = function () {// 直接传递数字// window.scrollTo(300, 1600)
 // 传递对象// window.scrollTo({// top: 200,// left: 900,// behavior: 'smooth'// })} </script>
</body>
</html>

来介绍一下这段代码吧：在浏览器上固定一个按钮，设置点击事件，运用scrollTo功能。第一种在点击来按钮之后，就会将滚动条滚动到指定位置；第二种同理，只不过它是以定位方式来滚动的，并加入了滚动的方式behavior：'smooth'。

注意滚动条的变化，在点击之后，滚动条发生了位置上的移动。这就是scrollTo()应用后的效果。

这里顺带再提一下另一个关于浏览器滚动的属性吧，通过document.documentElement.scrollTop或者document.body.scrollTop可以获取到浏览器滚动的尺寸。

浏览器弹出层

这里简单介绍一下浏览器弹出层这个概念，被使用的频率虽然少，但是还是需要了解一下的。 window.alert() 提示框 ，window.confirm() 确认框 ，window.prompt() 输入框 这三种都是属于浏览器弹出层。

用法如下所示：

import React from "react";
function App() {let res = window.confirm('hello world')console.log(res) // 返回bool值return (<div className="App"></div>);
}
export default App;