Q&A
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
###前提・実現したいこと
webサイトの制作で共通部分が多いためhtmlファイルを
パーツとして読み込もうと思い
JQueryの.loadを使用したのですが
読み込みたいhtmlのパーツのファイルにjavaScriptが記述されている
ためかうまくいきません。
何かよい解決方法があれば教えてください。
よろしくお願いいたします。
ちなみに読み込みたい
htmlファイルの内容はSNSのシェアボタンですが
以下のようなコード試した結果
ファイスブックのシェアボタンだけが表示されてしまいます
###発生している問題・エラーメッセージ
###該当のソースコード
以下のようなページに
==================================
このような内容のhtmlファイルのパーツを読み込みたいです。
<a href="https://twitter.com/share" class="twitter-share-button" data-via="Motoyama_Shota">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!-- フェイスブックシェアボタン --><!-- ラインで送るボタン --> <div class="line-it-button" data-lang="ja" data-type="share-a" style="display: none;"></div> <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async defer></script><script type="text/javascript"> var url = encodeURIComponent(location.href); document.write('<iframe src="https://www.facebook.com/plugins/share_button.php?href=' + url + '&layout=button&size=small&mobile_iframe=true&width=61&height=20&appId" width="61" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>'); </script>
==================================
回答2件
0
html
1<!-- フェイスブックシェアボタン --> 2<script type="text/javascript"> 3var url = encodeURIComponent(location.href); 4document.write('<iframe>...</iframe>'); 5</script> 6
LINEボタンの挙動についてはわかりかねますが、そもそもFacebookのボタンがdocument.write()でbody内を書き換えているので、Twitterソーシャルボタンが表示されないことはなんらおかしいことではありません。当然の挙動です。
Chromeデベロッパーツール等で見てもらえれば<div id="sns"></div>すらもなくなっていることが確認できるはずです。
Facebookボタンによるhtmlの書き換えを限定するには、以下のようにコンテナを用意し、そのinnerHtmlに対して要素を追加することです。
html
1<div id="fb-share-button"></div> 2 3<!-- フェイスブックシェアボタン --> 4<script type="text/javascript"> 5var url = encodeURIComponent(location.href); 6$('#fb-share-button').html('<iframe>...</iframe>'); 7</script> 8
ただ、私自身Web Componentsとして以外に外部のhtmlを読み込む場合のベストプラクティスを知らないため、本当に上のような実装が良いか、と聞かれればわかりません。bodyに対して破壊を行わないという一点での回答だと思って下さい。
正直普通にメインのページ内で全て読み込む方が良いと思います。
投稿2017/05/16 15:44
編集2017/05/16 15:48
総合スコア308
0
HTMLファイルは上から順番に読み込まれますので、<script>タグが<head>の中に書かれていると、<body>の読み込みを行う前にスクリプトが実行されることとなり、それが原因でトラブルが生じているのかもしれません。
<script>タグを</body>の直前に移動したら、案外動くかもしれません。
html
1 <script> 2 //共通パーツ読み込み 3 $(function() { 4 $("#sns").load("sns.html"); 5 }); 6 </script> 7</body>
投稿2017/05/16 15:10
総合スコア203
あなたの回答
tips
プレビュー
