Elementorでiframeの中のヘッダー・フッター部分を操作したい

前提・実現したいこと

Iframeで別ページを表示するときだけその別ページのヘッダー・フッターを非表示にしたい

WordpressでElementorPro（最新版）を使用してサイトを作成しています。
タブ機能の中にIframeで別のページを表示しようとしています。
Iframeで表示するときだけその別ページのヘッダー・フッターを非表示にしたいです。

発生している問題・エラーメッセージ

jqueryで操作しようとしてもiframe外のヘッダー・フッターが非表示になってしまい、
iframe内のヘッダーフッターが非表示になりません。

該当のソースコード

jquery
1header
2<script>
3jQuery(document).ready(function(){jQuery('.elementor-location-header').css('display','none');});
4</script>
5
6footer
7<script>
8jQuery(document).ready(function(){jQuery('footer').css('display','none');});
9</script>
10

試したこと

iframeにidを付加してidを取得してからidとfooterや.elementor-location-headerを後ろにつけてみましたが、無理でした。具体的にはこんな形です。

jQuery
1<script>
2var frame1 =document.getElementById("frame1");
3jQuery(document).ready(function(){
4jQuery('#frame1','.elementor-locaiton-header').css('display','none');});

多分、jQuery('#frame1','.elementor-locaiton-header')で二つ要素を指定してしまっていることなどが要因なのかとも思うのですが、Jqueryはほとんど初心者のため、どこを直したらよいかがわかりません。
宜しくお願い致します。

-resetcssの追加
ユーザーエージェントスタイルシートの影響も考えられたため、
ユーザーエージェントスタイルシートをリセットするスタイルシートを追加しましたが、
やはりうまくいきませんでした。
追加したcssは、html5resetcss(http://html5doctor.com/html-5-reset-stylesheet/）です、

補足情報（FW/ツールのバージョンなど）

Wordpress :5.8.2
jQuery:3.6.0
Elementor:3.5.3
Elementor Pro:3.5.2

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

回答1件

自己解決

自己解決できました、ありがとうございます。
resetcssを追加後、iframeにframe1というidをつけて

jQuery
1<script>
2jQuery('#frame1').on('load', function(){ jQuery('#frame1').contents().find('header').css('display','none');
3});
4</script>
5<script>
6jQuery('#frame1').on('load', function(){ jQuery('#frame1').contents().find('.nav-sp3').css('display','none');
7});
8</script>
9<script>
10jQuery('#frame1').on('load', function(){　jQuery('#frame1').contents().find('footer').css('display','none');

上記のようにそれぞれの要素をjQueryで操作したら解決ができました。
"hedaer" の部分の名前が変わっているのはHTMLタグを変更した（headerタグに）ためです。
.nav-sp3は独自のクラス名です。
今回loadしたら実行という形にしましたが、ちょっとだけ挙動がおかしい部分があるので、もし追記できるところがあったらまた追記させていただきます。

投稿2022/01/09 11:04

amazingsaphari

総合スコア0