使用 JavaScript 获取当前完整的 URL 并将其与 jQuery 一起使用答案

【问题标题】：Getting the current complete URL with JavaScript and using it with jQuery使用 JavaScript 获取当前完整的 URL 并将其与 jQuery 一起使用
【发布时间】：2012-03-09 17:18:29
【问题描述】：

我要在某人的网站上实现社交网络按钮。我希望尽可能轻松地做到这一点并且面向未来，以便客户在创建新页面时不需要添加任何内容。他所有的页面都是 HTML（不是 PHP），所以我不能使用任何 PHP。我在考虑 JS，然后使用 jQuery 的 .append 让它变得又好又简单，但我想知道是否有更好的方法和/或这种方法有任何缺陷？代码如下：

HEAD（脚本）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>$(document).ready(function() {
    var currentURL = window.location; //Get the URL, put it in a variable

    $('#fb').append('<div class=\"fb-like\" data-href=\"' + currentURL + '\" data-send=\"true\" data-width=\"450\" data-show-faces=\"true\" data-font=\"arial\"></div>');
});</script>

身体

<body>
    <div id="fb-root"></div>
    <script>
        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=177213782346727";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>

    <div id="fb">Test</div>
</body>

对此有何评论？我不想完全实现这一点，然后不得不重新改变一切。

【问题讨论】：

标签： javascript jquery facebook social-networking

【解决方案1】：

Google 的 API 库有时会因任何原因而停机。

我认为在 head 部分中包含一个加载 jQuery 的后备方法会受到欢迎：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

对于按钮本身，使用基于 JavaScript 和 jQuery 而不是 CSS3 的开源 jqDock 为它们设置动画可能会让您感兴趣。该网站的webpages 之一正在使用您可能想要查看的来自Wordpress 的社交插件。它显示了一种类似于您的 DIV 和 JS 的方法，但对于 FB 连接方案有所不同。也许是一种混搭方法。

如果 jqDock 太过分了，还有更多漂亮的社交按钮插件和 CSS/Animated tutorials 可供选择，它们可以直接用于他们的工作。

【讨论】：

【解决方案2】：

您可以将类似 fb 的 div 放在#fb 中，并在加载后编辑 data-href：

$("#fb-like").data("href",window.location);

【讨论】：

感谢您的回复，但我更喜欢我的脚本，因为那时我的客户只需要给他的 HTML 结构一个名为 FB 的 div 就可以了，而您的提供了相同的基本思想，但它显示了更多给客户的代码，他可能会对此感到困惑。不过感谢您的回复！