Question

我正在使用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);
}
});

链接创建中是否有任何属性我可以更改/添加或插入到链接创建中的文本，以允许站点将~解析为根目录？

Answer 1

以~波形符开头的路径在某些工具中具有特殊含义。但是，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语法可以执行您想要的操作。这是不可能的：浏览器无法知道服务器上定义的站点结构。

Answer 2

波浪线在javascript中没有任何意义。尝试使用：

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

在动态创建的链接中使用波浪号（〜）

2 个答案: