當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Javascript进阶篇——浏览器对象—Location、Navigator、userAgent、screen对象Script

發布時間：2023/12/31 HTML 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 Javascript进阶篇——浏览器对象—Location、Navigator、userAgent、screen对象Script 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Location對象

location用于獲取或設置窗體的URL,并且可以用于解析URL。

語法:?

location.[屬性|方法]

location對象屬性圖示:

location 對象屬性:

location 對象方法:

獲取當前顯示文檔的URL,并輸出:

1 <script type="text/javascript">

2? ??var a =?location.href;

3? ??document.write(a);

4 </script>

Navigator對象

對象屬性:

使用Navigator對象,查看瀏覽器相關信息:

1 <script type="text/javascript">

2? ??var browser =?navigator.appCodeName;

3? ??var b_browser =?navigator.appName;

4? ??var c_browser =?navigator.platform;

5? ??var d_browser =?navigator.userAgent;

6? ? document.write(browser + "</br>" + b_browser + "<br/>" + c_browser + "<br/>" +?d_browser)

7 </script>

運行結果:（我自己瀏覽器運行的結果）

Mozilla
Netscape
MacIntel
Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

（原有的結果）MozillaNetscapeWin32Mozilla/5.0?(Windows NT 6.1;?WOW64)?AppleWebKit/537.36 (KHTML, like Gecko)Chrome/41.0.2272.118 Safari/53

userAgent

返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)

語法?

?navigator.userAgent

幾種瀏覽的user_agent.,像360的兼容模式用的是IE、極速模式用的是chrom的內核。

使用userAgent判斷使用的是什么瀏覽器

1?<!DOCTYPE HTML>?

2?<html>?

3?<head>?

4? ?<meta?http-equiv="Content-Type"?content="text/html; charset=utf-8">

5? ?<title>navigator</title>?

6? ?<script?type="text/javascript">?

7? ? ? ??function?validB(){?

8? ? ? ? ? ?var?u_agent?=?navigator.userAgent;

9? ? ? ? ? ?var?B_name="不是想用的主流瀏覽器!";?

10? ? ? ? ??if(u_agent.indexOf("Firefox")>-1){?

11? ? ? ? ? ? ? ??B_name="Firefox";?

12? ? ? ? ? }elseif(u_agent.indexOf("Chrome")>-1){?

13? ? ? ? ? ? ? ?B_name="Chrome";?

14? ? ? ? ??}elseif(u_agent.indexOf("MSIE")>-1&;&;u_agent.indexOf("Trident")>-1){?

15? ? ? ? ? ? ? B_name="IE(8-10)";?

16? ? ? ? ?}

17? ? ?document.write("瀏覽器:"+B_name+"");

18? ??document.write("u_agent:"+u_agent+"");

19?}?

20?</script>

21?</head>

22?<body>

23?<form>

24?<input?type="button"?value="查看瀏覽器"?onclick?= "validB()"/>

25?</form>

26?</body>

27?</html>

運行結果:
瀏覽器:Chrome
u_agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36

screen對象

screen對象用于獲取用戶的屏幕信息

語法:

window.screen.屬性

對象屬性:

?屏幕分辨率的高和寬

window.screen 對象包含有關用戶屏幕的信息

1. screen.height 返回屏幕分辨率的高

2. screen.width 返回屏幕分辨率的寬

注意:
1.單位以像素計。

2. window.screen 對象在編寫時可以不使用 window 這個前綴。

獲取屏幕的高和寬,代碼如下:

1 <script type="text/javascript">

2? ? document.write( "屏幕寬度:"+screen.width+"px"?);

3? ??document.write( "屏幕高度:"+screen.height+"px"?);

4 </script>

運行結果:

屏幕寬度:1920px?
屏幕高度:1080px

屏幕可用高和寬度
1. screen.availWidth 屬性返回訪問者屏幕的寬度,以像素計,減去界面特性,比如任務欄。
2. screen.availHeight?屬性返回訪問者屏幕的高度,以像素計,減去界面特性,比如任務欄。

注意:
不同系統的任務欄默認高度不一樣,及任務欄的位置可在屏幕上下左右任何位置,所以有可能可用寬度和高度不一樣。

獲取屏幕的可用高和寬度,代碼如下:

1 <script type="text/javascript">

2 ????document.write("可用寬度:" +?screen.availWidth);

3 ????document.write("可用高度:" +screen.availHeight);

4 </script>

根據屏幕的不同顯示值不同。

運行結果:

可用寬度:1920

可用高度:977