本文目錄一覽：
- 1、怎麼用JS獲取獲取瀏覽器地址欄參數
- 2、js中如何獲取當前瀏覽器的地址的值
- 3、JS 獲取當前瀏覽器寬高
- 4、用js怎樣獲取所有打開的瀏覽器地址
- 5、JavaScript獲取網頁、瀏覽器、屏幕高度和寬度匯總
怎麼用JS獲取獲取瀏覽器地址欄參數
方法一：採用正則表達式獲取地址欄參數：（ 強烈推薦，既實用又方便！）
function GetQueryString(name)
{
var reg = new RegExp(“(^|)”+ name +”=([^]*)(|$)”);
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}
// 調用方法
alert(GetQueryString(“參數名1”));
alert(GetQueryString(“參數名2”));
alert(GetQueryString(“參數名3”));
下面舉一個例子:
若地址欄URL為：abc.html?id=123url=
那麼，但你用上面的方法去調用：alert(GetQueryString(“url”));
則會彈出一個對話框：內容就是
如果用：alert(GetQueryString(“id”));那麼彈出的內容就是 123 啦；
當然如果你沒有傳參數的話，比如你的地址是 abc.html 後面沒有參數，那強行輸出調用結果有的時候會報錯：
所以我們要加一個判斷 ，判斷我們請求的參數是否為空，首先把值賦給一個變數：
var myurl=GetQueryString(“url”);
if(myurl !=null myurl.toString().length1)
{
alert(GetQueryString(“url”));
}
這樣就不會報錯了！
方法二：傳統方法
script type=”text/javascript”
function UrlSearch()
{
var name,value;
var str=location.href; //取得整個地址欄
var num=str.indexOf(“?”)
str=str.substr(num+1); //取得所有參數 stringvar.substr(start [, length ]
var arr=str.split(“”); //各個參數放到數組裡
for(var i=0;i arr.length;i++){
num=arr[i].indexOf(“=”);
if(num0){
name=arr[i].substring(0,num);
value=arr[i].substr(num+1);
this[name]=value;
}
}
}
var Request=new UrlSearch(); //實例化
alert(Request.id);
/script
比如說把這個代碼存為1.html
那麼我要訪問1.html?id=test
這個時候就取到test的值了
在html里調用
script type=”text/javascript”
var a=””;
/script
/head
body
a id=”a1″ href=””sadfsdfas/a
script
var a1=document.getElementById(“a1”);
a1.href=a;
/script
script type=”text/javascript”
var a=””;
var s=a.indexOf(“?”);
var t=a.substring(s+1);// t就是?後面的東西了
/script
stringvar.substr(start [, length ]
返回一個從指定位置開始的指定長度的子字元串。
stringvar
必選項。要提取子字元串的字元串文字或 String 對象。
start
必選項。所需的子字元串的起始位置。字元串中的第一個字元的索引為 0。
length
可選項。在返回的子字元串中應包括的字元個數。
如果 length 為 0 或負數，將返回一個空字元串。如果沒有指定該參數，則子字元串將延續到 stringvar 的最後。
下面列舉出一些相關的參數：
str.toLowerCase() 轉換成小寫
str.toUpperCase() 字元串全部轉換成大寫
URL即:統一資源定位符 (Uniform Resource Locator, URL)
完整的URL由這幾個部分構成：
scheme://host:port/path?query#fragment
scheme:通信協議
常用的http,ftp,maito等
host:主機
伺服器(計算機)域名系統 (DNS) 主機名或 IP 地址。
port:埠號
整數，可選，省略時使用方案的默認埠，如http的默認埠為80。
path:路徑
由零或多個”/”符號隔開的字元串，一般用來表示主機上的一個目錄或文件地址。
query:查詢
可選，用於給動態網頁（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技術製作的網頁）傳遞參數，可有多個參數，用””符號隔開，每個參數的名和值用”=”符號隔開。
fragment:信息片斷
字元串，用於指定網路資源中的片斷。例如一個網頁中有多個名詞解釋，可使用fragment直接定位到某一名詞解釋。(也稱為錨點.)
對於這樣一個URL
;id=6#imhere
我們可以用javascript獲得其中的各個部分
1, window.location.href
整個URl字元串(在瀏覽器中就是完整的地址欄)
本例返回值: ;id=6#imhere
2,window.location.protocol
URL 的協議部分
本例返回值:http:
3,window.location.host
URL 的主機部分
本例返回值:
4,window.location.port
URL 的埠部分
如果採用默認的80埠(update:即使添加了:80)，那麼返回值並不是默認的80而是空字元
本例返回值:””
5,window.location.pathname
URL 的路徑部分(就是文件地址)
本例返回值:/fisker/post/0703/window.location.html
6,window.location.search
查詢(參數)部分
除了給動態語言賦值以外，我們同樣可以給靜態頁面,並使用javascript來獲得相信應的參數值
本例返回值:?ver=1.0id=6
7,window.location.hash
錨點
本例返回值:#imhere
js中如何獲取當前瀏覽器的地址的值
js中通過window.location.href和document.location.href、document.URL獲取當前瀏覽器的地址的值，它們的的區別是：
1、document表示的是一個文檔對象，window表示的是一個窗口對象，一個窗口下可以有多個文檔對象。所以一個窗口下只有一個window.location.href，但是可能有多個document.URL、document.location.href
2、window.location.href和document.location.href可以被賦值，然後跳轉到其它頁面，document.URL只能讀不能寫
3、document.location.href和document.location.replace都可以實現從A頁面切換到B頁面，但他們的區別是：
用document.location.href切換後，可以退回到原頁面。
而用document.location.replace切換後，不可以通過「後退」退回到原頁面。
JS 獲取當前瀏覽器寬高
JQuery獲取：
console.log($(window).width()); //瀏覽器當前窗口可視區域寬度
console.log($(window).height()); //瀏覽器當前窗口可視區域高度
console.log($(document).width());//瀏覽器當前窗口文檔對象寬度
console.log($(document).height()); //瀏覽器當前窗口文檔的高度
console.log($(document.body).width());//瀏覽器當前窗口文檔body的寬度
console.log($(document.body).height());//瀏覽器當前窗口文檔body的高度
console.log($(document.body).outerWidth(true));//瀏覽器當前窗口文檔body的總寬度 包括border padding margin
console.log($(document.body).outerHeight(true));//瀏覽器當前窗口文檔body的總高度 包括border padding margin
JS獲取：
窗口可視區域寬度 ： document.documentElement.clientWidth || document.body.clientWidth;
窗口可視區域高度 ： document.documentElement.clientHeight || document.body.clientHeight;
窗口可視區域寬度+邊線和滾動條 ： document.body.offsetWidth ;
窗口可視區域高度+邊線和滾動條 ： document.body.offsetHeight ;
實際內容的寬度 ： document.body.scrollWidth;
實際內容的高度 ： document.body.scrollHeight;
滾動條下拉被捲起來的距離 ：document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
滾動條側拉被捲起來的距離 ：document.body.scrollLeft || document.documentElement.scrollLeft ;
網頁正文部分上 ：window.screenTop;
網頁正文部分左 ：window.screenLeft;
元素的寬度 ：obj.offsetWidth;
元素的高度 ：obj.offsetHeight;
相對於父元素的上位移 ：obj.offsetTop;（在元素的包含元素不含滾動條的情況下）
相對於父元素的左位移 ：obj.offsetLeft;（在元素的包含元素不含滾動條的情況下）
用js怎樣獲取所有打開的瀏覽器地址
js中通過window.location.href和document.location.href、document.URL獲取當前瀏覽器的地址的值，它們的的區別是：
1、document表示的是一個文檔對象，window表示的是一個窗口對象，一個窗口下可以有多個文檔對象。所以一個窗口下只有一個window.location.href，但是可能有多個document.URL、document.location.href
2、window.location.href和document.location.href可以被賦值，然後跳轉到其它頁面，document.URL只能讀不能寫
3、document.location.href和document.location.replace都可以實現從A頁面切換到B頁面，但他們的區別是：
用document.location.href切換後，可以退回到原頁面。
而用document.location.replace切換後，不可以通過「後退」退回到原頁面。
JavaScript獲取網頁、瀏覽器、屏幕高度和寬度匯總
經常發現在寫JavaScript的時候，都需要用到網頁、瀏覽器或屏幕的高度和寬度來解決布局定位的問題，時常前用後忘，要不就是在網上search，乾脆自己總結一下，這樣也方便再次使用，省時省力。
網頁可見區域寬：document.body.clientWidth
網頁可見區域高：document.body.clientHeight
網頁可見區域寬：document.body.offsetWidth
(包括邊線的寬)
網頁可見區域高：document.body.offsetHeight
(包括邊線的寬)
網頁正文全文寬：document.body.scrollWidth
（帶滾動條寬）
網頁正文全文高：document.body.scrollHeight
（帶滾動條高）
網頁被捲去的高：document.body.scrollTop
網頁被捲去的左：document.body.scrollLeft
網頁正文部分上：window.screenTop
網頁正文部分左：window.screenLeft
屏幕解析度的高：window.screen.height
屏幕解析度的寬：window.screen.width
屏幕可用工作區高度：window.screen.availHeight
屏幕可用工作區寬度：window.screen.availWidth
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight:
獲取對象的滾動高度。
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對於版面或由父坐標
offsetParent
屬性指定的父坐標的高度
offsetLeft:獲取對象相對於版面或由
offsetParent
屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對於版面或由
offsetTop
屬性指定的父坐標的計算頂端位置
event.clientX
相對文檔的水平座標
event.clientY
相對文檔的垂直座標
event.offsetX
相對容器的水平坐標
event.offsetY
相對容器的垂直坐標
document.documentElement.scrollTop
垂直方向滾動的值
event.clientX+document.documentElement.scrollTop
相對文檔的水平座標+垂直方向滾動的量
IE，FireFox
差異如下：
IE6.0、FF1.06+：
複製代碼
代碼如下:
clientWidth
=
width
+
padding
clientHeight
=
height
+
padding
offsetWidth
=
width
+
padding
+
border
offsetHeight
=
height
+
padding
+
border
IE5.0/5.5：
複製代碼
代碼如下:
clientWidth
=
width
–
border
clientHeight
=
height
–
border
offsetWidth
=
width
offsetHeight
=
height
總結：關於高度和寬度的東西到是挺多的，具體的有些自己也沒有弄懂，通過自己試驗了一下，有些得出的值是一樣，所以很讓人迷惑，只能視情況而定了。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/308694.html
微信掃一掃 
支付寶掃一掃 