如何在HTML链接中使用JavaScript变量 [英] How to use JavaScript variable in an HTML link
问题描述
我正在工作的网站的<base>标记指向与该网站不同的URL.我想做的是通过使用trueURL波纹管找到网页的URL，从而绕过<base>标记，因为我需要它来构造一些内部锚点，因为我需要网站的实际URL，因此内部锚点正常工作.
The website that I am working on has a <base> tag point to a different URL than the one that the website has. What I would like to do is get around the <base> tag by using the trueURL bellow to find the url of the webpage, because i need it to construct some internal anchors, because i need the actual url of the website so the internal anchors work correctly.
即时通讯存在的问题是我不知道如何使用我存储在trueURL变量中的url.是否可以使用它，然后在URL中添加额外的扩展名使其指向我的锚点?下面是我想做的一个粗糙的例子
The issue that im having is that i don't know how i should use the url that i store in my trueURL variable. Is it possible to use it and then add extra extensions to the url to get it to point to my anchors? Below is a rough example of what I would like to be able to do
var trueURL = window.location.href;
<html>
<ol>
<li>
<a href= [trueURL] + "#link1">Link1</a>
</li>
<li>
<a href= [trueURL] + "#link2">Link2</a>
</li>
<li>
<a href= [trueURL] + "#link3">Link2</a>
</li>
</ol>
</html>
因此，最后我希望有一个看起来像trueURL#link3的链接.
Therefore in the end i would like to have a link that looks like trueURL#link3.
预先感谢
:D:D
推荐答案
我正在假设您的实际案例比您的示例更为复杂.如果不是，请查看其他答案，这可能更适合您的工作.
I am working on the assumption that your real case is more complex than your example. If it isn't, then review the other answers, which may be more appropriate for what you need to do.
这将是...
- 在
window加载事件上运行一个函数，该函数将... - 找到
DOM中作为A标记的每个元素，然后... - 浏览找到的
A标签，并检查该元素是否具有enhance类，如果有的话... - 在
#处拆分href以获取当前a元素的hash值，我们将... -
使用以下命令将其合并:
- Run on the
windowload event a function that will... - Find every element in the
DOMthat is anAtag, and... - Loop through those found
Atags and check if the element has anenhanceclass, and if so... - Split the
hrefat the#to get the currentaelement'shashvalue, which we will... Combine it with the following:
'//' + location.host + location.pathname;
为我们提供当前页面的URL，不带hash或查询字符串.如果您想要查询字符串(URL中?之后的内容)，请添加location.search:
Giving us the current page's URL without a hash or query string. If you want the query string (what's after the ? in a URL), add location.search:
'//' + location.host + location.pathname + location.search;
请注意，//部分与协议相关，因此它将使用base href的协议，例如http或https.但是，您可能要指定它.
Note, the // part is protocol relative, so it will use whatever the base href's protocol is, e.g., http or https. You may want to specify that, however.
标记
请注意class属性，我们将使用该属性来识别要操作的a标签.
Note the class attribute, which we will use to identify which a tags to manipulate.
<ol>
<li>
<a href="#link1">Link 1</a> -
No enhance class, should be subject to <strong>BASE HREF</strong>:
<strong class="p">» http://example.com#link1</strong>
</li>
<li>
<a href="#link2" class="enhance">Link 2</a> -
Has enhance class, should be:
<strong class="p">» http://fiddle.jshell.net/_display/#link2</strong>
</li>
<li>
<a href="#link3" class="enhance">Link 3</a> -
Has enhance class, should be:
<strong class="p">» http://fiddle.jshell.net/_display/#link3</strong>
</li>
<li>
<a href="#link3" class="enhance">Link 4</a> -
Has enhance class, should be:
<strong class="p">» http://fiddle.jshell.net/_display/#link4</strong>
</li>
</ol>
JavaScript
//--
// window.onload is not preferred, window.addEventListener
// should be used. Except that only IE9 supports it, and
// IE8 and lower do not support it, and uses window.attachEvent
// instead, which you can test for.
//
// I'm using window.onload here simply as a shortcut method and
// for clarity. This can also go in a script tag at the bottom
// of the body tag, in which case you can remove window.onload
// and use a self-calling anonymous function like:
//
// (function updateLinks(){... all the same as below ...})();
//
// This will ensure you are out of the global variable scope.
//--
window.onload = function updateLinks() {
//--
// Modern browsers can use document.getElementsByClassName
// or you can use a shiv script to add it to browsers that
// don't. I'll do it the "manual" way here, and this works
// cross-browser. The downside is that it will interate
// through every A tag on the page, looking for the "small"
// few that have the el.className we're looking for here.
//--
var els = document.getElementsByTagName("a"),
l = els.length,
trueURL = '//' + location.host + pathname,
i, el, hash;
for (i = 0; i < l; i++) {
el = els[i];
if (el.className.indexOf("enhance") != -1) {
hash = el.href.split('#');
el.href = trueURL + "#" + hash[1];
}
}
};
http://jsfiddle.net/userdude/unnH8/
将鼠标悬停在链接上以查看当前设置.与往常一样，在多个浏览器中彻底测试真实标记.
Mouseover the links to see the current setting. As always, thoroughly test with real markup in multiple browsers.
这篇关于如何在HTML链接中使用JavaScript变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
