如何通过JavaScript

Question

我在几页以下网址（http://something.com）追加与转向器URL所有HREF链接..

<a href="http://something.com">Home</a> 
<a href="index.html">Index</a> 
<a href="about.html">About</a> 
<a href="contact.php">Contact</a> 
<a href="#">Same</a> 
<a hre="http://example.com/home.html">New Home</a> 
<a href="../services.html">Services</a> 

什么，我要的是所有链接转换成...

<a href="http://this.com/?url=http://something.com">Home</a> 
<a href="http://this.com/?url=http://something.com/index.html">Index</a> 
<a href="http://this.com/?url=http://something.com/about.html">About</a> 
<a href="http://this.com/?url=http://something.com/contact.php">Contact</a> 
<a href="#">Same</a> 
<a hre="http://this.com/?url=http://example.com/home.html">New Home</a> 
<a href="../services.html">Services</a> 

所以基本上我不想转换"#"或"../"这样的链接。

我是JS的noob。

从我的努力，与W3Schools的的帮助..我试图做到： -

<script type="text/javascript"> 
var url= document.getElementByTagName(a); 
var pattern = /..\//g; 
var result = pattern.test(url); 
if(url.href != "#" || result === "false") { 
var nurl = url.replace("http://this.com/?url="+url.href, url.href); 
} 
</script> 

而且我不能做任何事......请帮帮忙，我怎么能修改URL和添加http://this.com/?url=My_web_page_url_here。

UPDATE 我代替我的JavaScript与

<script type="text/javascript"> 
var links = document.links; 
var i = links.length; 

while (i--) { 
    if (links[i].href.slice(-1) == "#" || 
     links[i].getAttribute("href").slice(0, 3) == "../") { 
     continue; 
    } 
    links[i].href = "http://this.com/?url=" + encodeURIComponent(links[i].href); 
}​ 
</script> 

而且还是所有的URL都在没有追加的方式相同。

Answer 1

尝试......

var links = document.links; 
var i = links.length; 

while (i--) { 
    if (links[i].href.slice(-1) == "#" || 
     links[i].getAttribute("href").slice(0, 3) == "../") { 
     continue; 
    } 
    links[i].href = "http://this.com/?url=" + encodeURIComponent(links[i].href); 
}​ 

jsFiddle。

我编码的参数，但如果你不想编码，就像在你的例子中一样，把呼叫放到encodeURIComponent()。

Answer 2

解决此问题的另一种方法是使用事件委派。此方法重写URL的链接使用（而不是之前）点：

window.onload = function(){ 

    var de = document.documentElement || document.body; 
    /// an event listener that steps in at the point the user has 
    /// clicked any element on the page. We specifically detect for 
    /// links and redirect the outcome 
    var proxyLink = function(e,t,href){ 
    /// handle old versions of IE 
    e = e || Event; t = e.target || e.srcElement; 
    /// hashs can occur at the end of external links, so am only checking 
    /// your specific case. Switched to using getAttribute so as to get 
    /// the original href string. 
    if (t.getAttribute('href').charAt(0) === '#') return; 
    if (t.getAttribute('href').indexOf('../') === 0) return; 
    if (String(t.nodeName).toLowerCase() == 'a') { 
     if (e.preventDefault) { e.preventDefault(); } 
     href = makeHrefAbsoluteIfPossible(t.href); 
     window.location = 'http://this.com/?url='+encodeURIComponent(href); 
     return (e.returnValue = false); 
    } 
    } 

    /// add the listener to the body or document element, this will trigger 
    /// the event onclick thanks to event bubbling. 
    if (de.addEventListener) { 
    /// handles modern browsers 
    de.addEventListener('click', proxyLink, true); 
    } 
    else { 
    /// handles old IE 
    de.attachEvent('onclick', proxyLink) 
    } 

} 

我也创建下面的函数到你的HREF扩展到基于当前window.location其绝对值。我无法知道哪些浏览器将返回一个绝对URL或原始HREF文本，所以这个功能只是柜面后者发生了：

function makeHrefAbsoluteIfPossible(href){ 
    var path; 
    if (href.indexOf(':') == -1) { 
    if (href.charAt(0) == '/') { 
     path = href; 
    } 
    else { 
     path = String(window.location.pathname); 
     if (path.indexOf('/') != -1) { 
     path = path.substring(0,path.lastIndexOf('/')) + '/'; 
     } 
     path += href; 
    } 
    return window.location.protocol +'://' + 
     window.location.host + path; 
    } 
    return href; 
} 

工作示例（与警报，而不是重定向的）：

http://jsfiddle.net/teykz/2/

这种方法的好处是，它可以与运行时生成新的html内容的应用程序一起工作......这通常发生在AJAX驱动的系统中。此外，链接仍然以原始形式显示给用户（这可以根据您在做什么来选择）。