まぜまぜ.xyz 「てぃろ」が好き勝手騒ぐブログ

iframeで遊ぼう

2020-01-19 18:33

うにゃあ（←あいさつ）

いま案件で、jimdoで作ったホームページの中に、PHPで作った外部機能を埋め込むと言う話で、もごもごしています。

そんな複雑なことするなら初めからPHPとかWordpressとか使えばいいと思うのですが、自分でページのデザインや記述内容を操作できる（と思い込んでる）ごよーすで、なんとも言えません。問題拡大してる気がします。

で、cakePHPで作ったものを<iframe>で張り込むのですが、このとき問題が出るのです。<iframe>部分の縦幅の制御。

ネットで調べると、JavaScriptでフレーム内から親ウインドウへ通信ができるそうなので、こんなの作ってみた。

<!-- iframe側の適当なところ（末尾とか）に -->
<script>
setTimeout( function(){
	var h = document.documentElement.scrollHeight;
	parent.postMessage( 0+h, "*");
}, 1000);

window.onload = function(){
	//ページを離れる直前に通信する（必要な場合）
	window.onbeforeunload = function(){
		var h = document.documentElement.scrollHeight;
		parent.postMessage( 0+150, "*");
	}
}
</script>

もういっちょ！

<!-- 親ウインドウ側のiframe貼りたい場所へ -->
<iframe src="https://ほげほげ.com/test.php" height="150" width="100%" frameborder="0" id="unauna" name="unauna"></iframe> 
<script>
window.addEventListener('message', function(e) {
    if(e.origin=="https://ほげほげ.com" && e.data > 0 ){
        $('#unauna').height( e.data );
    }
}, false);
</script>

だいたいこんな感じ。<iframe>側から必要な縦幅を申告させて、親ウインドウ側はそれに合わせて<iframe>を表示する縦幅がちょうどいいように伸ばして調整してもらうのです。

このとき、<iframe>内部の記事が少ないとかで縦幅が足りない（上の例だとheight=”150″の所で、これに対して中身が足りない）と、縦幅が縮みません。heightに設定する値は充分に小さくした方がいいですが、JavaScript無効な環境からだと見れなくなるジレンマ。

自分用のメモ、いったんこれにて！

PHP || By てぃろ