javascript - 读取浏览器导航栏并基于它生成导航链接

Question

我想知道是否可以有一个可以读取地址栏的脚本；

示例(不是实际链接):http://www.example.net/page-2011

将page-2011部分变成

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

因此，无需创建 3000 个导航链接，它会自动生成。作为一个额外的挑战，侧边栏是一个完全独立的页面，当您加载页面时，由于缺少更好的术语，它在“编译时”加载。 http://www.example.net/nav:side这是每次加载页面时拉取的实际页面。

Answer 1

The Window.location read-only property returns a Location object with information about the current location of the document.

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

The split() method splits a String object into an array of strings by separating the string into substrings.

javascript .split()

获得 URL 后，您可以使用 .split("-") .在您的情况下，如果每个页面都设置为 /page-2 ，这将返回一个对象 {"page","2"}

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

The slice() method extracts a section of a string and returns a new string.

javascript .slice()

如果您的路径以 / 结尾，您可以使用 .slice() 来 trim 最后一个字符。

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

现在您可以获取页码 2通过访问 pathSplit索引处的对象 1然后解析页码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()]Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.

javascript .setAttribute()

最后，您可以设置 anchor 的值<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());

注意:确保您已为上一页和下一页链接分配了类或 ID。