2017-05-04 9 views
0

私は、アドレスバーを読むことができるスクリプトを持つことが可能かどうか疑問に思っています。ブラウザのナビゲーションバーを読んでそれに基づいてナビゲーションリンクを生成する

例(ない実際のリンク):http://www.example.net/page-2011

とページ-2011の部分を取り、だからではなく、それだけで自動的に生成3000個のナビゲーションリンクを作成するので

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

にそれを回します。追加の課題として、サイドバーは完全に別のページで、ページをロードするときに、より良い用語がないために「コンパイル時」に読み込まれます。 http://www.example.net/nav:sideこれは、ページが読み込まれるたびに取得される実際のページです。

答えて

0

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()

あなたはURLを持っていたら、.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 

今、あなたはインデックス1pathSplitオブジェクトにアクセスして、ページ番号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()); 

注:はあなたの前の、次のページがリンクするクラスやIDが割り当てられていることを確認。

関連する問題