使用JavaScript為整個網站建立通用的Twitter按鈕
介紹
本文展示瞭如何建立一個Twitter按鈕來共享動態更改的div或動態更改的url。這將是非常有用的，如果你想要共享任何基於使用者視口的URL。例如，假設您希望在使用者的curser位於div 1時共享URL 1，然後使用者單擊share按鈕，作為響應，我們需要共享該div的URL，而不是該頁面的URL。我的解釋可能聽起來有點模稜兩可，但不用擔心，這個例子會讓我想說的更清楚。
簡單的Twitter按鈕
假設你有一個視差網站。現在，您決定新增一個Twitter分享按鈕，這樣使用者就可以分享他們正在瀏覽的任何頁面。為此，您決定使用Twitter按鈕。可以使用下面的程式碼片段將simple按鈕放置在指定的頁面上。
<ahref="https://twitter.com/share"class="twitter-share-button"data-lang="en">Tweet</a> <script> !function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js”; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs"); </script>
以上程式碼將建立一個簡單的按鈕，如下圖所示:
要共享URL，只需單擊按鈕，其餘的由Twitter自己處理。現在看看下面的圖片:
您可以通過更改錨標記的屬性來定製URL文字和要共享的URL。例如，檢查以下程式碼片段:
現在輸出是這樣的:
您可以檢查Twitter資源中心的其他屬性。到目前為止，它是簡單的，但這篇文章不是為了這個目的。讓我們來談談上面的Twitter按鈕的問題。
這個問題
現在假設您在一個頁面中有幾個div，並且想要共享使用者按下share按鈕時div的URL。但是由於我們只有一個公共的Twitter按鈕，它不能每次共享不同的url，因為我們已經為data-url屬性提供了一個值。現在您可能會說，我們可以使用JavaScript動態地更改URL(使用setAttribute()方法等)，但這是不可能的。推特在幕後施展了一些魔法。請看下面的圖片:
神奇之處在於，您為Twitter按鈕建立了錨標記，但在頁面載入之後，它卻不在頁面中。如果您檢視上面的圖片，您可以很容易地發現我們的頁面中添加了一個iframe。實際上，iframe是由Twitter按鈕JavaScript新增的。它將錨呈現給IFrame。這就是為什麼我們不能用簡單的技術來改變它。所以問題是如何動態更改URL，換句話說，在頁面載入之後。
解決方案
為了解決前面的問題，我們需要完全刪除那個按鈕，然後建立我們自己的按鈕。我們還可以更改新的iFrame的屬性，但這會更加麻煩。在開始之前，我們需要準備工作區。你可以開啟JS Bin或者從下面的程式碼開始。
準備工作
只需建立一個新的HTML檔案，並把這段程式碼:
隱藏,複製程式碼<html> <head> <linkhref="http://ajax.googleapis.com/ajax/libs/jqueryui/ 1/themes/smoothness/jquery-ui.min.css” rel="stylesheet"type="text/css"/> <scriptsrc="http://ajax.googleapis.com/ajax/libs/ jquery/1/jquery.min.js"></script> <scriptsrc="http://ajax.googleapis.com/ajax/libs/ jqueryui/1/jquery-ui.min.js"></script> <metacharset="utf-8"/> <title>Overlay by Arpit</title> <style> /* we will use this section for adding css classes or any styling */ </style> </head> <body> <!–HTMLwillgohere–> <script> $(document).ready(function () { // We will use this for adding our jQuery or scripts }); </script> </body> </html>
複製這個問題
為了解決這個問題，我們需要那個問題的原型。要建立原型，只需將以下HTML貼上到HTML部分中。
隱藏,複製程式碼<div id="block1" onmouseover="share (‘UploadFile/4aac15/building-accordion-with-css3-without-using-any-jquery-or-js/’);"> </div> <div id="block2" onmouseover="share (‘UploadFile/4aac15/creating-a-file-uploader-using-javascript-and-html-5/’);"> </div> <div id="block3" onmouseover="share (‘UploadFile/4b0136/getting-started-with-view-in-mvc-5/’);"> </div>
在前面的HTML中，我建立了3個div，並假設每個div都有一些您想要與common share按鈕共享的內容。共享方法中的URL是內容的URL。在我的例子中，它是不同的，但你也可以傳遞片段URL，這樣當它被點選時，可以輕鬆導航到那個div。
隱藏,複製程式碼<div id="block2" onmouseover="share (‘UploadFile/4aac15/creating-a-file-uploader-using-javascript-and-html-5#middleSection’);">
中間部分是片段名。Share是我們將在本文後面編寫的一個函式。要做一些設計，只需新增以下CSS:
隱藏,複製程式碼#ta{ position:fixed; left:92%; top:51%; width:50px; height:50px; } #block1{ width:100%; height:900px; background-color:rgba(1,220,3,0.4); border:1px solid black; } #block2{ width:100%; height:900px; background-color:rgba(41,220,130,0.4); border:1px solid black; } #block3{ width:100%; height:900px; background-color:rgba(1,220,123,0.4); border:1px solid black; }
函式的作用是:生成顏色。CSS的其餘部分相當平庸。現在讓我們把Twitter按鈕新增到我們的頁面;為此，新增以下HTML片段。
隱藏,複製程式碼<aid="ta"href="https://twitter.com/share?url=https%3A%2F%2Fdev.twitter.com%2Fpages %2Ftweet-button”target="_blank"> <imgsrc=’http://wis.ewi.tudelft.nl/tweetum/twitter.png’ height=50 width=50/> </a>
它將新增帶有藍色小鳥圖示的Twitter按鈕。
編寫指令碼並解決問題
現在是時候進入戰場了，我們有JavaScript作為武器來對抗這個問題。要解決這個問題，我們需要使用“查詢字串”。簡單來說，我們需要做的是:
- 獲取原始查詢字串。為此，我們可以在錨元素上使用getAttribute("href")。我們把它命名為rawSrc。如下圖所示:
- 現在我們需要在查詢字串中找到“url=”的索引。我們叫它li1。它在字串中包含"url="的索引。現在從查詢字串中刪除“url=”及其之後的所有內容並儲存它。我們可以使用substring()函式。我們叫它“backUrl1”。它包含Twitter共享URL，但沒有任何實際的共享URL。現在我們需要在查詢字串中新增我們自己的URL。這很簡單，只需將共享函式的引數附加到backUrl1中。我們叫它newUrl1。現在對於重要的任務，我們需要通過這個新URL更新錨標記href的值。為此，我們將使用setAttribute()方法。所有的技術工作都完成了。現在讓我們將整個程式碼包裝到一個接受要共享的URL的函式呼叫共享中。
完成上述所有步驟後，指令碼將類似於以下程式碼片段:
現場演示
總結
感謝您閱讀本文。我盡力使它切中要點。為了簡單起見，刪除了多餘的程式碼。我還省略了查詢字串中的其他引數，但您可以按照與前一個相同的方式新增它們。
本文轉載於：http://www.diyabc.com/frontweb/news13621.html