网站首页 > 技术文章 正文
1 JS获取浏览器属性数据
<h3>你目前所使用的浏览器的数据:</h3>
<div class="data">
<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();
var browser =
(browser = userAgent.match(/qqbrowser\/([\d.]+)/))?"qqbrowser/"+browser[1]:
(browser = userAgent.match(/se\s+2.x/))?"sogou/2.x": //sougou
(browser = userAgent.match(/msie\s+([\d.]+)/))?"msie/"+browser[1]: //ie
(browser = userAgent.match(/chrome\/([\d.]+)/))?"chrome/"+browser[1]: //chrome
(browser = userAgent.match(/firefox\/([\d.]+)/))?"firefox/"+browser[1]: //firefox
(browser = userAgent.match(/version\/([\d.]+)\s+safari\/([\d.]+)/))?"safari/"+browser[1]: //safari
(browser = userAgent.match(/opera\/([\d.]+)([\w\W]+)version\/([\d.]+)/))?"opera/"+browser[3]: //opera
"other browser";
//以上是条件运算符“?:"的嵌套使用
var browser4 = browser.substr(0,6);
document.write("<table>");
document.write("<tr><td>" + "Browser:" + "</td>");
document.write("<td>" + browser4 + "</td></tr>" );
document.write("<tr><td>" + "Browser Version:" + "</td>");
document.write("<td>" + browser + "</td></tr>" );
document.write("<tr><td>" + "userAgent:" + "</td>");
document.write("<td>" + userAgent + "</td></tr>" );
var appVersion = navigator.appVersion.toLowerCase();
document.write("<tr><td>" + "appVersion:" + "</td>");
document.write("<td>" + appVersion + "</td></tr>" );
var appCodeName = navigator.appCodeName.toLowerCase();
document.write("<tr><td>" + "appCodeName:" + "</td>");
document.write("<td>" + appCodeName + "</td></tr>" );
var appName = navigator.appName.toLowerCase();
document.write("<tr><td>" + "appName:" + "</td>");
document.write("<td>" + appName + "</td></tr>" );
//var language = navigator.language.toLowerCase(); (ie下无此属性)
//document.write("language:" + language + "<br>" );
var platform = navigator.platform.toLowerCase();
document.write("<tr><td>" + "platform:" + "</td>");
document.write("<td>" + platform + "</td></tr>" );
document.write("</table>");
</script>
</div>
使用chrome显示网页内容如下:
使用firefox显示网页内容如下:
2 JS获取窗口数据
<h3>浏览器窗口数据:</h3>
<div class="data">
<table>
<col width="50%" />
<col width="50%" />
<tr><td>右边的数据反映浏览器窗口高宽的数据(单位是px,不包括上端的菜单栏和工具栏,也不包括下端的状态栏;按F11全屏显示或“还原”按钮并调整大小也会有不同的数据反馈。)</td>
<td>
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
<p>浏览器窗口的实际高度: <input type="text" name="availHeight" size="4"/> </p>
<p>浏览器窗口的实际宽度: <input type="text" name="availWidth" size="4"/> </p>
</form>
</td></tr></table>
</div>
<script type="text/javascript">
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数:获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测,获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//调用函数,获取数值
window.onresize=findDimensions;
</script>
使用chrome显示网页内容如下:
使用firefox显示网页内容如下:
-End-
猜你喜欢
- 2024-10-04 Vue选项:computed计算属性(vue3.0 计算属性)
- 2024-10-04 Vue 中的计算属性(vue中的计算属性)
- 2024-10-04 Js基础7:表单元素属性(js中表单)
- 2024-10-04 Jquery属性——学习笔记(一)(如何使用jquery设置一个属性值)
- 2024-10-04 前端入门——在网页中使用JavaScript
- 2024-10-04 前端-JavaScript中的class(javascript class)
- 2024-10-04 如何获取JavaScript中某个函数可接受的参数数量
- 2024-10-04 关于js设置对象attr属性的问题(js对象属性值)
- 2024-10-04 react三大核心属性(react的核心)
- 2024-10-04 JS 对象基本用法(js对象的操作方法)
- 10-02基于深度学习的铸件缺陷检测_如何控制和检测铸件缺陷?有缺陷铸件如何处置?
- 10-02Linux Mint 22.1 Cinnamon Edition 搭建深度学习环境
- 10-02AWD-LSTM语言模型是如何实现的_lstm语言模型
- 10-02NVIDIA Jetson Nano 2GB 系列文章(53):TAO模型训练工具简介
- 10-02使用ONNX和Torchscript加快推理速度的测试
- 10-02tensorflow GPU环境安装踩坑日记_tensorflow配置gpu环境
- 10-02Keye-VL-1.5-8B 快手 Keye-VL— 腾讯云两卡 32GB GPU保姆级部署指南
- 10-02Gateway_gateways
- 最近发表
-
- 基于深度学习的铸件缺陷检测_如何控制和检测铸件缺陷?有缺陷铸件如何处置?
- Linux Mint 22.1 Cinnamon Edition 搭建深度学习环境
- AWD-LSTM语言模型是如何实现的_lstm语言模型
- NVIDIA Jetson Nano 2GB 系列文章(53):TAO模型训练工具简介
- 使用ONNX和Torchscript加快推理速度的测试
- tensorflow GPU环境安装踩坑日记_tensorflow配置gpu环境
- Keye-VL-1.5-8B 快手 Keye-VL— 腾讯云两卡 32GB GPU保姆级部署指南
- Gateway_gateways
- Coze开源本地部署教程_开源canopen
- 扣子开源本地部署教程 丨Coze智能体小白喂饭级指南
- 标签列表
-
- cmd/c (90)
- c++中::是什么意思 (84)
- 标签用于 (71)
- 主键只能有一个吗 (77)
- c#console.writeline不显示 (95)
- pythoncase语句 (88)
- es6includes (74)
- sqlset (76)
- apt-getinstall-y (100)
- node_modules怎么生成 (87)
- chromepost (71)
- flexdirection (73)
- c++int转char (80)
- mysqlany_value (79)
- static函数和普通函数 (84)
- el-date-picker开始日期早于结束日期 (76)
- js判断是否是json字符串 (75)
- c语言min函数头文件 (77)
- asynccallback (87)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- 无效的列索引 (74)