Html 标签属性值来自 javascript 值

Question

我快疯了，我对 js 或 html 不太好，所以请尝试帮助我。在我的博主博客上，我想 1) 使用goo.gl 服务自动创建短link 2) 通过按钮在 Twitter 上分享这个短片 link 我用来使 link 变短

的 js 代码

<script type="text/javascript">
    var shorturl;
      var longUrl="http://*****" + "<data:blog.url/>";
      var request = gapi.client.urlshortener.url.insert({
      'resource': {
      'longUrl': longUrl
         }
       });
       request.execute(function(response) 
       {

        if(response.id != null)
        {
            shorturl=response.id;
        }
        else
        {
            shorturl="<data:blog.url/>";
            alert("error: creating short url n"+ response.error);
        }
        document.getElementById('shorturlid').setAttribute("data-url",shorturl);
    });
    </script>

推特按钮的代码

<a href="https://twitter.com/share" class="twitter-share-button" id="shorturlid" data-via="*****" data-size="large" data-count="none" data-hashtags="*****">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

这只是共享当前页面 url 所以我的代码似乎什么也没做。

有什么解决办法吗？

Answer 1

我创建了一个 jsfiddle，我注意到一旦执行了 Twitter 脚本，您就无法使用 shorturlid 访问 link。

因为它改变了 DOM 很多。一种更好的方法是在准备好缩短的 url 并将其添加到 DOM.

后调用 twitter 脚本

我的脚本似乎可以运行，但有时我会收到以下错误Error. User Rate Limit Exceeded. 不确定是什么。也许如果你运行脚本太频繁了。

（我使用了 jQuery 因为它更容易创建 DOM 元素。当然，纯 JS 也应该如此。）

var longurl = 'http://www.google.com/';
var $tw_link;

gapi.client.load('urlshortener', 'v1', function () {
    var request = gapi.client.urlshortener.url.insert({
        'resource': {
            'longUrl': longurl
        }
    });
    var resp = request.execute(function (resp) {
        if (resp.error) {
            $("#show").html('Error. ' + resp.error.message);
        } else {
            $("#show").html("Short URL for " + longurl + " is: " + resp.id);
            var shorturl = resp.id; //document.getElementById('shorturlid').setAttribute("data-url", shorturl); // not working because twitter button changes DOM!!
            $tw_link = $('<a/>');
            $tw_link.attr('href', 'http://twitter.com/share');
            $tw_link.addClass('twitter-share-button');
            $tw_link.attr('data-url', shorturl);
            //var body = document.getElementsByTagName('body');
            $('#show').append($tw_link);
            console.log(shorturl, $tw_link);
            loadTwitter();
            //alert(shorturl);
        }
    });
});

function loadTwitter() {
    ! function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0],
            p = /^http:/.test(d.location) ? 'http' : 'https';
        if (!d.getElementById(id)) {
            js = d.createElement(s);
            js.id = id;
            js.src = p + '://platform.twitter.com/widgets.js';
            fjs.parentNode.insertBefore(js, fjs);
        }
    }(document, 'script', 'twitter-wjs');
};

Html 标签属性值来自 javascript 值

Html tag attribute value from javascript value

html

javascript

tags

getelementbyid