如何使用 JavaScript 正确定义 href 属性？答案

【问题标题】：how can i correctly define the href attribute using JavaScript?如何使用 JavaScript 正确定义 href 属性？
【发布时间】：2014-10-25 21:27:35
【问题描述】：

我有一个链接，可以将用户带到我的网站的意大利语版本。我想使用 javascript 定义这个锚的 href 属性，以便它相对于当前页面。这是html：

<a href="javascript:changeLanguage()" id="lang-link"" >Italiano</a>

这里是javascript：

function changeLanguage(){

    var pathArray = window.location.pathname.split( '/' );

    var filename = pathArray[2];

    var newURL = window.location.protocol + "://" + window.location.host + "/ITALIANO/" + filename;

    document.getElementById("lang-link").href= newURL;
};

当我单击链接时，我必须单击两次才能加载新页面并加载错误。我的编码使我：

http://www.ilcataldo.com/de/http:://www.ilcataldo.com/ITALIANO/shows.html

代替：

http://www.ilcataldo.com/ITALIANO/shows.html

有人可以解释我做错了什么吗？我是一个自学成才的新手！
谢谢，天主教

【问题讨论】：

第一次单击链接时，它所做的只是更改链接的href，它不会从该 URL 重新加载页面。您必须再次单击它才能访问新链接。
要转到新网址，请执行document.location.href = newURL
您的网址构造有误。请参阅下面的答案。
在服务器端构建这个链接！不要使用javascript: 伪协议。
感谢您的反馈。我会让你知道我过得怎么样！

标签： javascript href

【解决方案1】：

改变这个：

var newURL = window.location.protocol + "://" + window.location.host + "/ITALIANO/" + filename;

document.getElementById("lang-link").href= newURL;

到这里：

window.location = window.location.protocol + "//" + window.location.host + "/ITALIANO/" + filename;

您看到错误 URL 的原因与代码中 URL 的构造有关。您在协议前缀中插入了无关的 :，这不是正确的 URI 格式。因此，浏览器假定链接引用是相对于当前文档的。

您必须单击两次才能重新加载页面的原因是您的代码仅在第一次单击时修改了链接href。它不是在指示浏览器加载新页面。

【讨论】：

【解决方案2】：

试试：

<a href="" onclick="changeLanguage()" id="lang-link">Italiano</a>

使用 JavaScript：

function changeLanguage() {
 var pathArray = window.location.pathname.split( '/' );
 var filename = pathArray[2];
 var newURL = window.location.protocol + "//" + window.location.host + "/ITALIANO/" + filename;
 document.location.href = newURL;
}

【讨论】：