文中已经参与「 . 」
序言
做为前端工程师工作人员,电脑浏览器是我们接触数最多的辅助工具。电脑浏览器带有的作用有许多,电脑浏览器最基本的的作用是打开网页了,对开发商来讲,还可以使用电脑浏览器来调试代码,查询网页加载全过程,获得网页页面要求。总而言之,电脑浏览器是一个很重要的专用工具。
那样,对于浏览器原生态特性和专业知识又了解多少呢?在这里我搜集并整理了一些浏览器原生态专业知识,有关这种电脑浏览器专业知识都是基于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
, 照片, 音频视频等) 所有载入完成后开启。但我们应注意,这类只有关联一个事件处理函数。假如我们写2个事件处理函数, 那样只能实行后边一个。
<!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>
来介绍一下这一段编码吧:用浏览器上固定一个按键,设定js点击事件,应用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;
别的几类弹出层使用方法一致。
电脑浏览器专业知识
电脑浏览器跨域请求处理
电脑浏览器调节
有关浏览器调节,我们能打开网页的后台管理查询控制面板特性。
频繁使用过的 console.log() 导出便是在Console
下查询的。
Network
查询一些插口信息内容,借助它来查看插口字段名都是不错的选择。
Application
查询缓存文件,例如项目中的session
,cookie
这些。
之上这都是总是能应用过的特性。
汇总
以上就是关于一些关于电脑浏览器基础知识总结了,有关电脑浏览器大家还有一些要了解内容,例如电脑浏览器存放,这也是很重要的。电脑浏览器做为平常开发设计里的实用工具,它的功能是不可忽视,因而,对电脑浏览器理论水平地越大,就会越有助于我们的日常开发设计。
声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你
原文地址:电脑浏览器原生态特性和专业知识