Question

我的几页（http://something.com）中有以下网址..

<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的小伙伴。

在我的努力下，在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>

我无法执行任何操作...请帮助，如何修改网址并添加http://this.com/?url=My_web_page_url_here。

更新我用

替换了我的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>

仍然所有的网址都是一样的，没有追加。

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)
  }

}

我还创建了以下函数，根据当前window.location将href扩展为绝对值。我不知道哪些浏览器会返回绝对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驱动的系统上。此外，链接仍然显示为用户的原始链接（这可能需要取决于您正在做的事情）。

如何通过javascript附加所有href链接与重定向器URL

2 个答案: