JavaScript瀏覽器對(duì)象模型(BOM)——location對(duì)象

location

location提供了與當(dāng)前窗口中加載的文檔有關(guān)的信息,還提供了一些導(dǎo)航功能。
location對(duì)象是很特別的一個(gè)對(duì)象,它既是window對(duì)象的屬性,也是document對(duì)象的屬性,window.location和document.location引用的是同一個(gè)對(duì)象。
location對(duì)象的用處不只表現(xiàn)在它保存著當(dāng)前文檔的信息,還表現(xiàn)在它將URL解析為獨(dú)立的片段,可以通過(guò)不同的屬性訪問(wèn)這些片段。

  • hash : "#contents" 返回URL中的hash(#號(hào)后跟零或多個(gè)字符),如果URL中不包含散列,就返回空字符串。
  • host:"www.baidu.com:80" 返回服務(wù)器名稱和端口號(hào)(如果有)
  • hostname:"www.baidu.com" 返回不帶端口號(hào)的服務(wù)器名稱
  • href:"http:/www.baidu.com",返回當(dāng)前加載頁(yè)面的完整URL。location對(duì)象的toString()方法也返回這個(gè)值。
  • pathname:"/WileyCDA/" 返回URL中的目錄和(或)文件名
  • port:"8080" 返回URL中指定的端口號(hào)。如果URL中不包含端口號(hào),則這個(gè)屬性返回空字符串。
  • protocol:"http:" 返回頁(yè)面使用的協(xié)議,通常是http:或https;
  • search:"?q=javascript" 返回URL的查詢字符串。這個(gè)字符串以問(wèn)號(hào)開(kāi)頭

1. 查詢字符串參數(shù)
創(chuàng)建一個(gè)函數(shù),用以解析查詢字符串,然后返回包含所有參數(shù)的一個(gè)對(duì)象:

        function getQueryStringArgs() {
                //取得查詢字符串并去掉開(kāi)頭的問(wèn)號(hào)
            var qs = (location.search.length>0?location.search.substring(1):""),
                //保存數(shù)據(jù)的對(duì)象
                args = {},
                //取得每一項(xiàng)
                items = qs.length ? qs.split("&"):[],
                itme = null,
                name = null,
                value = null,
                //在for循環(huán)中使用
                i = 0,
                len = items.length;
                //逐個(gè)將每一項(xiàng)調(diào)價(jià)到args中
                for(i=0; i<len; i++){
                    item = items[i].split("=");
                    name = decodeURIComponent(item[0]);
                    value = decodeURIComponent(item[1]);
                    if(name.length){
                        args[name] = value;
                    }
                }
                return args;
        }

用decodeURIComponent()分別解碼name和value(因?yàn)椴樵冏址畱?yīng)該是被編碼過(guò)的)。
2. 位置操作

使用location對(duì)象可以通過(guò)很多方式來(lái)改變?yōu)g覽器的位置。
最常用的方式,就是使用assign()方法并為其傳遞一個(gè)URL:

        location.assign("http://www.wrox.com");

這樣可以立即打開(kāi)新URL并在瀏覽器的歷史記錄中生成一條記錄。如果是將location.href或window.location設(shè)置為一個(gè)URL值,也會(huì)以該值調(diào)用assign()方法。如:

        window.location = "http:/www.wrox.com";
        location.href = "http:/www.wrox.com";

修改location對(duì)象的其他屬性也可以改變當(dāng)前加載的頁(yè)面。

        //假設(shè)初始URL為http://www.wrox.com/WileyCDA/
        //將URL修改為http://www.wrox.com/WileyCDA/#section1
        location.hash = "#section1";
        //將URL修改為http://www.wrox.com/WileyCDA/?q=javascript
        location.search = "?q=javascript";
        //將URL修改為http://www.baidu.com/WileyCDA/
        location.hostname = "www.baidu.com";
        //將URL修改為http://www.baidu.com/mydir/
        location.pathname = "mydir";
        //將URL修改為http://www.baidu.com:8080/WileyCDA/
        location.port = 8080;

每次修改location的屬性(hash除外),頁(yè)面都會(huì)以新URL重寫(xiě)加載。
當(dāng)通過(guò)上述任何一種方式修改URL后,瀏覽器的歷史記錄就會(huì)生成一條新記錄,可通過(guò)點(diǎn)擊“后退”按鈕導(dǎo)航前一個(gè)頁(yè)面。
要禁用這種行為,可以使用replace()方法。這個(gè)方法只接受一個(gè)參數(shù),要導(dǎo)航到的URL。結(jié)果會(huì)到時(shí)瀏覽器位置改變,但不會(huì)在歷史記錄中生成新記錄。在調(diào)用replace()方法后,用戶不能回到前一個(gè)頁(yè)面。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>You won't be able to get  back here</title>
    </head>
    <body>
        <p>Enjoy this page</p>
        <script type="text/javascript">
            setTimeout(function () {
                location.replace("http://www.wrox.com/");
            },1000);
        </script>
    </body>

與位置有關(guān)的最后一個(gè)操作是reload(),作用是重新加載當(dāng)前顯示的頁(yè)面。

        location.reload();//重新加載(有可能從緩存中加載)
        location.reload(true);//重新加載(從服務(wù)器重新加載)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,545評(píng)論 19 139
  • Math對(duì)象 Math 對(duì)象用于執(zhí)行數(shù)學(xué)任務(wù)。 Math 對(duì)象并不像 Date 和 String 那樣是對(duì)象的類(lèi),...
    Zd_silent閱讀 488評(píng)論 0 0
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語(yǔ)法,類(lèi)相關(guān)的語(yǔ)法,內(nèi)部類(lèi)的語(yǔ)法,繼承相關(guān)的語(yǔ)法,異常的語(yǔ)法,線程的語(yǔ)...
    子非魚(yú)_t_閱讀 34,652評(píng)論 18 399
  • 那天在看奇葩說(shuō),婆婆在身后路過(guò)的時(shí)候,瞥了一眼,對(duì)著正在侃侃而言的高曉松說(shuō),長(zhǎng)得不那么好看的人,也可以當(dāng)明星??? ...
    夏至未眠閱讀 1,143評(píng)論 1 6
  • 山還是那座山 樹(shù)還是那棵樹(shù) 我還是那個(gè)我 而你已不是原來(lái)的你 黑夜孤獨(dú)了我的心 淚水迷濕了我的雙眼 我知道男兒有淚...
    筆尖上的王者閱讀 301評(píng)論 0 0

友情鏈接更多精彩內(nèi)容