Q&A
それは、はじめに設定してありましたが、念のため、もう一度小文字にしなおして試しましたが状況は変わりませんでした
HPに twitterボタンを表示し、
押したら、ポップアップで、デフォルトで、指定した文字列が表示されるよう
data-text と data-url を指定していますが、
javascript でボタンを押したら、内部で計算させ、その数字や数字にしたがって変更された文字列などを ボタンを押したときのデフォルト値に変化させたいのですが、
dataset などを使っても、変化がなく 方法をご存知でしたら、教えていただけませんか？
HTML
1<a id="test" href="https://twitter.com/share" class="twitter-share-button" data-url="https://yahoo.co.jp" data-text="ヤフーです。！" 2 data-size="large" 3 data-count="horizontal" 4 data-hashtags="ほにゃらら">Tweet</a>
と記述してあり
デフォルト data-url = "https://yahoo.co.jp"
data-text = "ヤフーです。！"
この状態で、tweetボタンをクリックすると 本文の中が
「ヤフーです。！ https://yahoo.co.jp」
と表示されますが
これを HP上に別途用意した "googleに切り替え" ボタンをクリックしたら
Javascript で
javascript
1 function google () { 2 var test = document.getElementById("test"); 3 test.dataset.Url = 'https://gooogle.com'; 4 test.dataset.Text = 'グーグルです'; 5 }
としてHTMLで
HTML
1 <button onclick="google()">googleに切り替え</button> 2``` 3としていても、googleに切り替えボタンをクリックしても 希望としては 4「グーグルです。jttps://google.com」と出てほしいのですが、yahooのまま切り替わっていません。これを動的に切り替える方法はあるでしょうか
回答2件
0
ベストアンサー
こんにちは、it_solution_labさん
質問の内容を拝見しました。
おそらく、data-textやdata-urlのデータ属性を利用した設定に関しては、以下のコード例で貼り付けてコメントアウトしているTwitter側のwidget生成スクリプトを、初回ロード時にのみ適用され、iframeのボタンが生成されているのではないかと思います。
https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/set-up-twitter-for-websites
iframeで生成されたDOMを更新するのは非常に難易度が高いと思いますので、もし動的に変更するのであれば、要求するURLを自ら組み立てるのがよいのではないかと思います。
以下に1例を実装してみましたので、ご検討ください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="uft-8"> <title></title> </head> <body> <!-- <a id="test" href="https://twitter.com/share" class="twitter-share-button" data-url="https://yahoo.co.jp" data-text="ヤフーです。！" data-size="large" data-count="horizontal" data-hashtags="ほにゃらら,ふが" >Tweet</a> --> <a id="test" href="https://twitter.com/intent/tweet" data-url="https://yahoo.co.jp" data-text="thisistext" data-hashtags="foo,bar" target="_blank" rel="nofollow noopener" >Tweet</a> <button id="google">googleに切り替え</button> <script> // Tweetリンクのhrefにattributeを追加 function setTweetButton() { const tweetButton = document.getElementById('test'); const href = tweetButton.getAttribute('href').split('?')[0]; const url = encodeURI(tweetButton.dataset.url); const text = encodeURI(tweetButton.dataset.text); const hashtags = encodeURI(tweetButton.dataset.hashtags); tweetButton.setAttribute('href', `${href}?url=${url}&text=${text}&hashtags=${hashtags}`); } // 「googleに切り替え」 document.getElementById('google').addEventListener('click', function() { const tweetButton = document.getElementById('test'); tweetButton.dataset.url = 'https://google.com'; tweetButton.dataset.text = 'グーグルです'; tweetButton.dataset.hashtags = 'google,tweet'; setTweetButton(); }); // 初回ロード時の呼び出し (function() { setTweetButton(); })(); </script> <script> window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs")); </script> </body> </html>
以上、参考になれば、幸いです。
投稿2019/12/28 15:11
総合スコア406
0
小文字で指定すれば切り替わると思います。
JavaScript
1 test.dataset.url = 'https://gooogle.com'; 2 test.dataset.text = 'グーグルです';
ハイフンでつなげてる場合は、キャメルケースになります。
data-text-message -> textMessage
投稿2019/12/26 08:26
総合スコア192
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/01 02:36
2020/01/18 02:14