使用JavaScript獲取當前完整的URL並將其與jQuery一起使用

我要在某人的網站上實現社交網絡按鈕。我希望儘可能輕鬆地做到這一點，以保證未來的安全，以便客戶在創建新頁面時不需要添加任何內容。他所有的頁面都是HTML（不是PHP），所以我不能使用任何PHP。我想到的是JS，然後使用jQuery的.append使它變得很好，很容易，但我想知道是否有更好的方法和/或這種方法有什麼缺陷？下面是代碼：使用JavaScript獲取當前完整的URL並將其與jQuery一起使用

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

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

上，任何言論？我不想完全實現這一點，然後必須重新改變一切。

來源

2012-03-09 Bram Vanroy

看起來不夠好 – 2012-03-09 17:22:51

有一次，谷歌的API庫下去無論出於何種原因。

我認爲包括備用方法加載的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>

對於按鈕本身，開源動畫他們jqDock你可能感興趣的是基於JavaScript和jQuery和不是CSS3。該網站的其中一個webpages正在使用Wordpress中的社交插件，您可能需要查看該插件。它顯示了一種類似於您的DIV和JS的方法，但對於FB連接方案而言是不同的。也許混搭方法是有序的。

如果jqDock過度殺毒，還有很多漂亮的社交按鈕插件和CSS/Animated tutorials可以從中選擇哪些是直接的。

來源

2012-06-01 11:05:31 arttronics

你可以把你的#fb FB-類似div和編輯數據的href後負荷：

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

來源

2012-03-09 17:23:52 Alytrem

感謝您的回覆，但我更喜歡我的腳本，因爲那時我的客戶端只需要給他的HTML結構一個名爲FB的div即可，而您的提供了相同的基本想法，但它顯示了更多的代碼給他的客戶，他可能會感到困惑。感謝您的回覆！ – 2012-03-09 17:38:48

使用JavaScript獲取當前完整的URL並將其與jQuery一起使用

回答

相關問題