讀取瀏覽器導航欄以及基於它的導航鏈接

Question

我不知道是否有可能有一個腳本，可以讀取地址欄;

例子（不是真正的鏈接）：http://www.example.net/page-2011

，並採取頁2011的部分，把它變成

« <a href="/page-2010">Previous</a>|<a href="/page-2012">Next</a> » 

因此而不必使3000的導航鏈接，它只是自動生成它。作爲額外的挑戰，側邊欄是一個完全獨立的頁面，當您加載頁面時，在編譯時加載缺少更好的術語。 http://www.example.net/nav:side這是每次加載頁面時拉出的實際頁面。

Answer 1

Window.location只讀屬性返回一個Location對象，其中包含有關文檔當前位置的信息。

javascript Window.location

var url1 = window.location;   //returns the url as an object 
var url2 = window.location.href;  //returns the url string 
var url3 = window.location.pathname; //returns the url path 

的分裂（）方法通過分離串成子分割字符串對象到字符串數組。

javascript .split()

一旦你的網址，你可以使用.split("-")。在你的情況，如果每一個頁面被設置爲/page-2，這將返回一個對象{"page","2"}

var pathSplit = url3.split("-");  //returns {"page","2"} from page-2 

切片（）方法提取字符串的一部分，並返回一個新的字符串。

javascript .slice()

在你的路徑以/結束的情況下，你可以使用.slice（）修剪過的最後一個字符。

var pathSplice = url3.slice(0,-1);  //returns /page-2 from /page-2/ 
var pathSplit = pathSplice.split("-"); //returns {"/page","2"} from /page-2 

現在可以通過在索引1訪問pathSplit對象抓取頁碼2，然後解析頁碼2爲一個整數，並執行所需的方程來接收期望的網頁。

var pageNum = parseInt(pathSplit[1]); 
var prevPage = 0, 
    nextPage = 0; 
if(isNaN(pageNum) === false){ 
    prevPage = pageNum - 1; //returns 1 from 2 
    nextPage = pageNum + 1; //returns 3 from 2 
} 

[Element.setAttribute（）]將指定元素的屬性的值。如果該屬性已經存在，則更新該值;否則將使用指定的名稱和值添加新屬性。

javascript .setAttribute()

最後，你可以設置你的錨<a></a>像值，以便

var prevLink = document.querySelector(".prev-link"); 
var nextLink = document.querySelector(".next-link"); 
prevLink.setAttribute("href", "/page-" + prevPage.toString()); 
nextLink.setAttribute("href", "/page-" + nextPage.toString()); 

注：確保您分配一個class和id到以前和下一個頁面鏈接。