投稿
  1. 簡單一點首頁
  2. 編程

網頁js獲取器（js獲取網頁內容）

小藍 • • 編程

本文目錄一覽：

怎麼用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-hant/n/308694.html

贊 (0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
0 0
上一篇 2025-01-03 14:49
下一篇 2025-01-03 14:49

相關推薦

發表回復

登錄後才能評論