動的に作成されたiframeタグ内の要素のstyleを上書きしたい

前提・実現したいこと

FacebookforDevelopersで提供されているコードで表示させているタイムラインの幅を
width:100%の設定にしたいです。
タイムラインウィジェットはiframeでできています。
設定画面で固定幅を指定できますが、何も指定しないと一律で幅340pxの設定になるようです。
iframeタグはcssで設定を上掛けますが、内部に固定値が適用されており上手くできません。

該当のソースコード

HTML
1<iframe id="fb_frame" src="https://www.facebook.com/plugins/page.php?href=xxxxx&amp;tabs=timeline&amp;small_header=false&amp;adapt_container_width=true&amp;hide_cover=false&amp;show_facepile=false&amp;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件

自己解決

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

harami_

総合スコア128

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！