2016-02-16 161 views
0

我使用JavaScript動態創建包含鏈接和URL的子菜單項。但是,當我導航到鏈接時,URL不會將~解析爲根目錄,而只是將該字符串附加到當前URL。在動態創建的鏈接中使用波浪號(〜)

HTML:

<!DOCTYPE html> 
<html> 

    <body> 

     <div id="left-menu" class="sidr-hide"> 
      <ul> 
       <li><a href="~/">Home</a></li> 
       <li><a href="~/ListItem1">ListItem1</a></li> 
       <li><a href="~/ListItem2">ListItem1</a> 
        <ul id="ListItemDropdown"> 
Following items will be created Dynamically 

     @* <li><a href="~/ListItem2/?param=SubItem1">SubItem1</a></li> 
     <li><a href="~/ListItem2/?param=SubItem2">SubItem2</a></li>*@ 
     </ul> 
       </li> 

      Added here for link testing: 
       <li><a href="~/ListItem2/?param=SubItem1">SubItem1</a></li> 
       <li><a href="~/ListItem2/?param=SubItem2">SubItem2</a></li> 
      </ul> 
     </div> 

     <script src="~/Scripts/Layout.js"></script> 
    </body> 
</html> 

是直接在上面,做工精細的HTML標籤寫的所有鏈接。

的JavaScript:

var ExchangeLeftDropdown = document.getElementById("ListItemDropdown"); 

$(document).ready(function() { 
var test = "Subitem1}SubItem2}"; //This string will be filled by a controller later on 
var test2 = test.split("}"); 
for (i = 0; i < test2.length; i++) { 
    //Create List Item 
    var newListItem = document.createElement("li"); 
    //Create Link Item 
    var itemLink = document.createElement("a"); 
    //Add text to link Item 
    itemLink.textContent = test2[i]; 
    //Add link URL to link Item 
    itemLink.setAttribute("href", "~/ListItem2/?dom=" + test2[i]);//Desired URL, 
    //but this tilde doesn't equate to home directory, so instead I get this 
    //in the URL http://localhost:1461/'DirectoryCurrentlyViewing'/~/ListItem2/?dom=SubItem2. 
    //it does lead to the right place if you navigate from the home directory 


    // itemLink.setAttribute("href", "<%=ResolveUrl(~/Exchange/?dom=" + test2[i] + ")%>"); 
    // This attempt resulted in me getting a 404 error vs a Server Error in '/' Application 
    //The URl is again a directly pasted string: http://localhost:1461/ListItem2/<%=ResolveUrl(~/ListItem2/?dom=SubItem2)%%> 
    itemLink.setAttribute("runat", "server"); //The attempt to parse the URL server side didn't have any effect 
    newListItem.appendChild(itemLink); 
    ExchangeLeftDropdown.appendChild(newListItem); 
} 
}); 

是否有鏈路創建我可以改變/添加或文本插入鏈接創建,將允許網站解析~爲根目錄中的任何財產?

+1

看起來你很迷惑[ASP.NET的'〜'在路徑中](https://msdn.microsoft.com/en-us/library/ms178116.aspx)的東西,可以在HTML中使用一般。如果你想要根相關的URL,只需使用相對URL並離開'〜'。 – zzzzBov

回答

0

~代字符開頭的路徑在某些工具中具有特殊含義。但是,這不是URL中的情況。 ~代字號沒有特殊含義,因此您的網址被解釋爲正常的相對網址。如果您使用的是http://example.com/a/b,並且您點擊指向~c的鏈接,那麼您將以http://example.com/a/~c而不是http://example.com/~c結束。

如果您希望將您的網址解析爲主機名下的絕對路徑,而不是相對網址,則需要以/開頭。這被稱爲"path-absolute URL"。如果~應該位於最終URL中,例如Linux用戶目錄,則可能需要/~。如果~只是應該是一個獨立於主機根,只需使用/自身:

itemLink.setAttribute("href", "/ListItem2/?dom=" + test2[i]);//Desired URL, 

如果網站的根不是在主機根,但在子目錄中,也沒有標準的URL語法來做你想做的。這是不可能的:瀏覽器無法知道服務器上定義的站點結構。

+0

謝謝,這工作完美 – Stanislav

-1

代字號在JavaScript中沒有意義。嘗試使用:

var hostname = window.location.href; 
itemLink.setAttribute("href", hostname + "/ListItem2/?dom=" + test2[i]);