JavaScript基础——BOM浏览器对象模型

简介: JavaScript基础——BOM浏览器对象模型

Window

代表的是整个浏览器的窗口,同时window也是网页中的全局对象  。重要属性如下


所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。


全局变量是 window 对象的属性。


全局函数是 window 对象的方法。


<script>
    window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
    window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
    window.open() - 打开新窗口
    window.close() - 关闭当前窗口
    window.moveTo() - 移动当前窗口
    window.resizeTo() - 调整当前窗口的尺寸
</script>

Navigator

代表的当前浏览器的信息,通过该对象可以用来识别不同的浏览器。重要属性如下


<script>
    txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
    txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
    txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
    txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
    txt+= "<p>硬件平台: " + navigator.platform + "</p>";
    txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
    txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
    document.getElementById("example").innerHTML=txt;
</script>

Location

代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面


<script>
    location.hostname   //返回 web 主机的域名
    location.pathname   //返回当前页面的路径和文件名
    location.port  //返回 web 主机的端口 (80 或 443)
    location.protocol   //返回所使用的 web 协议(http: 或 https:
</script>

History

代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录


由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页,而且浏览器关闭后有效


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<head>
<script>
    function goBack()
    {
        window.history.back()  //history.back() 方法加载历史列表中的前一个 URL。
    }
    function goForward()
    {
        window.history.forward()  //history forward() 方法加载历史列表中的下一个 URL。
    }
</script>
</head>
<body>
      <input type="button" value="Back" onclick="goBack()">  //向前
      <input type="button" value="Forward" onclick="goForward()">  //向后
</body>
</html>

Screen

代表用户的屏幕 的信息,通过该对象可以通过获取用户的显示器的相关的信息。重要属性如下


<script>
document.write("可用宽度: " + screen.availWidth);
document.write("可用高度: " + screen.availHeight);
</script>
相关文章
|
4天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
25 0
|
2天前
|
Web App开发 JavaScript 前端开发
浏览器与Node.js事件循环:异同点及工作原理
浏览器与Node.js事件循环:异同点及工作原理
|
2天前
|
前端开发 JavaScript Java
Java与JavaScript的区别与联系:有人的地方就有江湖,有浏览器的地方就有JavaScript
Java与JavaScript的区别与联系:有人的地方就有江湖,有浏览器的地方就有JavaScript
|
4天前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
16 0
|
4天前
|
JavaScript 前端开发 数据可视化
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
Three.js 是一个用于在 Web 上创建和显示 3D 图形的 JavaScript 库。它提供了丰富的功能和灵活的 API,使开发者可以轻松地在网页中创建各种 3D 场景、模型和动画效果。可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等。这里记录一下如何在Vue项目中使用Three.js
36 4
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
|
4天前
|
JavaScript 前端开发
Playwright执行 JavaScript 脚本:探索浏览器自动化的新境界
在Web自动化中,Playwright提供`page.evaluate()`和`page.evaluate_handle()`来执行JavaScript脚本。`page.evaluate()`返回脚本执行结果,而`page.evaluate_handle()`返回JSHandle。示例展示了如何使用它们,如打印网页标题、操作元素及获取页面内容。通过这些方法,可以处理常规方法难以操作的网页元素。
10 2
|
4天前
|
前端开发 JavaScript TensorFlow
如何将训练好的Python模型给JavaScript使用?
本文介绍了如何将TensorFlow模型转换为Web格式以实现浏览器中的实际应用。首先,简述了已有一个能够检测扑克牌的TensorFlow模型,目标是将其部署到Web上。接着,讲解了TensorFlow.js Converter的作用,它能将Python API创建的GraphDef模型转化为TensorFlow.js可读取的json格式,用于浏览器中的推理计算。然后,详细说明了Converter的安装、用法及不同输入输出格式,并提供了转换命令示例。最后,文中提到了模型转换后的实践步骤,包括找到导出的模型、执行转换命令以及在浏览器端部署模型的流程。
17 3
|
4天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
10 2
|
4天前
|
前端开发 JavaScript UED
JavaScript 的事件循环机制是其非阻塞 I/O 模型的核心
【5月更文挑战第9天】JavaScript的事件循环机制是其非阻塞I/O的关键,通过单线程的调用栈和任务队列处理异步任务。当调用栈空时,事件循环从任务队列取出一个任务执行,形成循环。异步操作完成后,回调函数进入任务队列,等待被事件循环处理。微任务如Promise回调在每个宏任务结束后执行。此机制确保JavaScript能高效处理异步操作,不阻塞主线程,提供流畅的用户体验。
12 2
|
4天前
|
移动开发 JavaScript 前端开发
javascript监听浏览器离开、进入行为
javascript监听浏览器离开、进入行为
14 0