Q&A前提・実現したいこと
FacebookforDevelopersで提供されているコードで表示させているタイムラインの幅を
width:100%の設定にしたいです。
タイムラインウィジェットはiframeでできています。
設定画面で固定幅を指定できますが、何も指定しないと一律で幅340pxの設定になるようです。
iframeタグはcssで設定を上掛けますが、内部に固定値が適用されており上手くできません。
該当のソースコード
HTML
1<iframe id="fb_frame" src="https://www.facebook.com/plugins/page.php?href=xxxxx&tabs=timeline&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId" width="100%" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe> 2 3<html lang="ja" id="facebook" class="svg "> 4 <head>…省略…</head> 5 <body dir="ltr" class="plugin chrome webkit win x1 Locale_ja_JP"> 6 <div class="_li"> 7 <div> 8 <div id="u_0_0_iC"> 9 <div class=""> 10 <div class="_2p3a" style="min-width: 180px; width: 340px;"> 11 …省略… 12 </body> 13</html>
JavaScript
1var iframeElem = document.getElementById('fb_frame'); 2var iframeDocument = iframeElem.contentWindow.document; 3var pElem = iframeDocument.querySelector('._2p3a');
試したこと
開発者ツールで確認したところ、クラス名"_2p3a"の要素に指定されているwidthの値を変更すれば実現したい挙動になりました。
目当ての要素を取得しようとしてもnullと出てしましました。
ドキュメントオブジェクトの取得まではできていると思われますが、ここからどうしたらよいか分かりません。
回答1件
0
自己解決
php
1<div id="fb-root"></div> 2<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v11.0" nonce="k5jpeCFx"></script> 3<div id="fb_frame" class="fb-page" data-href="https://www.facebook.com/xxxxx" data-tabs="timeline" data-width="460" data-height="350" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/xxxxx" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/xxxxx">xxxxx</a></blockquote></div>
Javascript
1var checkResize; 2var lastInnerWidth = 0; 3 4$(window).on('load resize', function() { 5 clearTimeout( checkResize ); 6 checkResize = setTimeout(resizing, 100); 7}); 8 9function resizing() { 10 if((lastInnerWidth != window.innerWidth) || lastInnerWidth == 0) { // 現在と前回の横幅が違う場合または初回読込み時だけ実行 11 var w_attr = $('#fb_frame').attr('data-width'); 12 if(window.innerWidth >= 960) { // Desktopサイズ(レスポンシブなし) 13 if(w_attr != 460) { 14 $('#fb_frame').attr('data-width','460'); 15 $('#fb_frame iframe').attr('width','460'); 16 var src = $('#fb_frame iframe').attr('src').replace(w_attr, '460'); 17 $('#fb_frame iframe').attr('src', src); 18 } 19 } else { 20 if(window.innerWidth < 640) { // Mobileサイズ 21 var frame = Math.floor(window.innerWidth * 0.83); 22 if(frame > 500) { frame = 500; } 23 } else { // Desktopサイズ(レスポンシブあり) 24 var frame = Math.round((window.innerWidth / 2) - 20); 25 } 26 $('#fb_frame').attr('data-width',frame); 27 $('#fb_frame iframe').attr('width',frame); 28 var src = $('#fb_frame iframe').attr('src').replace(w_attr, frame); 29 $('#fb_frame iframe').attr('src', src); 30 } 31 } 32 lastInnerWidth = window.innerWidth; 33}
投稿2021/08/30 01:12
総合スコア128
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。