如何使此链接在javascript中起作用

Question

Ok basically I have this javascript file http://assets.revback.com/scripts/share1.js that basically adds a bunch of share buttons via javascript.

What I want to do, is change the twitter image link to use an url shortener:

so instead of:

<a href=\"http:\/\/twitter.com\/home?status=Interesting Post:(UURRLL)\" title=\"Click to share this page on Twitter\"><img src=\"http:\/\/assets.revback.com\/scripts\/images\/twitter.png\" border=\"0\"\/><\/a>

I want to use

<a href="#" onClick="window.location='http://ko.ly?action=shorten&uri=' + window.location + '&dest=twitter.com/?status=Reading ';"><img src=http://assets.revback.com/scripts/images/twitter.png"><\/a>

but I need that bottom one, to be written with javascript friendly syntax. ie like in the top one, instead of http://, you have http://

Answer 1

Lose the onclick . There is no benefit to it whatsoever, since it just acts like a normal link (except much more broken). Now you don't have to worry about escaping JavaScript inside JavaScript and the consequent \\\\\\\\\\\\\\\\ madness.

var buttonhtml= (
    '<a href="http://ko.ly?action=shorten&amp;uri='+encodeURIComponent(location.href)+'&amp;dest=twitter.com/?status=Reading">'+
        '<img src=http://assets.revback.com/scripts/images/twitter.png">'+
    '</a>'
);

(Note that the encodeURIComponent , which is essential to correctly inserting your current URL into another URL without breaking, is also protecting you from HTML-injection, since < and & characters get % -encoded. Without that safeguard, any page that includes your script has cross-site-scripting vulnerabilities.)

Better still, lose the HTML string-slinging altogether and use DOM methods to create your content. Then you don't need to worry about & and other HTML escapes, and you don't have to hack your HTML together with crude, unreliable string replacing. You seem to be using jQuery, so:

var link= $('<a>', {href:'http://ko.ly?action=shorten&uri='+encodeURIComponent(location.href)+'&dest=twitter.com/?status=Reading'});
link.append('<img>', {src: 'http://assets.revback.com/scripts/images/twitter.png'});
link.appendTo(mydiv);

ETA: I'd replace the whole markuppy mess with a loop and the data broken out into a lookup. ie. something like:

(function() {
    var u= encodeURIComponent(location.href);
    var t= encodeURIComponent(document.title);
    var services= {
        Facebook: 'http://www.facebook.com/sharer.php?u='+u,
        Twitter: 'http://ko.ly?action=shorten&uri='+u+'&dest=twitter.com/?status=Reading',
        StumbleUpon: 'http://www.stumbleupon.com\/submit?url='+u+'&title='+t,
        // several more
    };

    var share= $('<div class="ea_share"><h4>Share this with others!</h4></div>');
    for (var s in services) {
        share.append($('<a>').attr('href', services[s]).attr('title', 'Click to share this on '+s).append(
            $('<img>').attr('src', 'http://assets.styleguidence.com/scripts/images/'+s.toLowerCase()+'.png')
        ));
    }
    $('#question .vt').append(share);
})();

Answer 2

Try this

<a href="#" onClick="window.location='http://site.com?action=shorten&uri='+ 
  window.location + '&dest=twitter.com/?status=Reading;'">tweet this</a>

Answer 3

Change the href of the link in the onclick attribute:

<a href="#" onclick="this.href='http://site.com?action=shorten&uri=' + window.location + '&dest=twitter.com/?status=Reading';">tweet this</a>

The default action (going to the page designated by the href attribute) will always still be executed unless the event handler onclick receives a return value of false . So, changing the href before it happens will cause it to go to the page you want it to as long as you don't return false.

Answer 4

<a href =“＃” onClick =“ window.location =' http ://site.com?action=shorten&uri='+ window.location.href +'＆dest = twitter.com /？status =正在读取';返回false ;“>发布此信息