iframeで読み込んだHTMLファイルのCSS読み込み遅延を回避するには

Question

####困っていること
静的なサイトをWordpressに移行する作業を行なっています。
フォームのあるHTMLファイルを、iframeで読み込んでおり、iframeの方にCSSファイルでスタイルが効かせているのですが、ページが遷移するたびに表示させたくないものが一瞬、表示された後消えます。

####コード

<iframe class="iframe" src="https://example.com/foo.php"></iframe>
<script>
	(function($) {
		$('.iframe').on('load', function() {
			$('.iframe').contents().find('head').append('<link rel="stylesheet" href="https://example.com/wp/wp-content/themes/themeName/iframe.css" type="text/css" />');
		});
	})(jQuery);
</script>

#header, #headCont, #footer, .bread, #intro2 {
    display: none;
}

####試したこと
iframeに以下の属性を追加する

• loading="lazy" 読み込みの遅延をさせる
• loading="eager" すぐにコンテンツを読み込む
• loading="auto" ブラウザが遅延読み込みさせるかを判断する

どちらも、期待した動作になりませんでした。

画面がちらつくので、最初から表示無しにさせたいのですが、どうしたら良いでしょうか。
よろしくお願いいたします。

Comments

[m.ts10806]

hoge.comのドメイン所有者でないなら例示ドメインを利用してください

[Lhankor_Mhy]

foo.php に直書きしてしまった方がいいのでは。

[arutoi]

例示ドメインというものを初めて聞きました。example.com等を使うようにします！ありがとうございます。

[arutoi]

foo.phpに直書きというのも手ですね。ありがとうございます！

Answer 1

iframe内の文書に後からスタイルシートを挿入している以上、ちらつきを完全になくすのは不可能だと思います。

foo.phpが、親フレームに依存して動作を変える必要があるなら、<iframe src=".../foo.php?hide=header"> のようにパラメータを付けてfoo.php内でパラメータを見てスタイルシートを追加してはどうでしょうか。

Comments

[arutoi]

確かにちらつきを完全に無くすのは、無理そうな気がしてきました。パラメータで処理を分ける方法は、使えそうです。ありがとうございました！