使用 JavaScript 获取当前完整的 URL 并将其与 jQuery 一起使用
Posted
技术标签:
【中文标题】使用 JavaScript 获取当前完整的 URL 并将其与 jQuery 一起使用【英文标题】：Getting the current complete URL with JavaScript and using it with 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>
对此有何评论？我不想完全实现这一点，然后不得不重新改变一切。
【问题讨论】：
【参考方案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 就可以了，而您的提供了相同的基本思想，但它显示了更多给客户的代码，他可能会对此感到困惑。不过感谢您的回复！以上是关于使用 JavaScript 获取当前完整的 URL 并将其与 jQuery 一起使用的主要内容，如果未能解决你的问题，请参考以下文章