さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】iframeの高さを動的に取得する方法(クロスドメイン対応) その2 – porthole –

Pocket
LINEで送る

iframeの高さを読み込んだページ(別ドメインのページ)の高さに動的に変更する方法をご紹介。(porthole使用版)

例)
親ページ → https://parent.co.jp/parent.html
子ページ → https://child.co.jp/child.html

まずは、下記からJQueryライブラリのPortholeをダウンロードします。

parent.html

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/porthole.min.js"></script>
<script>
var windowProxy;
window.onload=function(){ 
    windowProxy = new Porthole.WindowProxy('https://child.co.jp/child.html', 'childIframe');
    windowProxy.addEventListener(function(e) {
        var childHeight = e.data.height;
        $("#childIframe").height(childHeight);
    });
};
</script>
</head>
<body>
<iframe id="childIframe" name="childIframe" src="https://child.co.jp/child.html" frameborder="0" scrolling="no">この部分は iframe 対応のブラウザでご覧ください。</iframe>
</body>

child.html

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/porthole.min.js"></script>
<script type="text/javascript">
var windowProxy;
window.onload = function() {
    windowProxy = new Porthole.WindowProxy("https://parent.co.jp/parent.html");
    windowProxy.post({'height': document.documentElement.offsetHeight});
};
</script>
</head>
<body>
・・・
</body>

iframeに読み込むページURLをJQueryで指定して読み込んでいるのでスクリプトをいじれば複数のiframeに対応することも出来ます。
複数のiframeに対応させるには親に記述するスクリプトを以下のようにします。

parent.html

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/porthole.min.js"></script>
<script>
var windowProxy1;
var windowProxy2;

window.onload=function(){ 
	windowProxy1 = new Porthole.WindowProxy('https://child.co.jp/child.html', 'childIframe');
	windowProxy1.addEventListener(function(e) {
		var childHeight = e.data.height;
		$("#childIframe").height(childHeight);
	});

	windowProxy2 = new Porthole.WindowProxy('https://child.co.jp/child2.html', 'childIframe2');
	windowProxy2.addEventListener(function(e) {
		var childHeight = e.data.height;
		$("#childIframe2").height(childHeight);
	});
};
</script>
</head>
<body>
	<iframe id="childIframe" name="childIframe" src="https://child.co.jp/child.html" frameborder="0" scrolling="no">この部分は iframe 対応のブラウザでご覧ください。</iframe>

	<iframe id="childIframe2" name="childIframe2" src="https://child.co.jp/child2.html" frameborder="0" scrolling="no">この部分は iframe 対応のブラウザでご覧ください。</iframe>
</body>

参考サイト

カテゴリー:HP制作, JQuery

コメントを残す

コメント内容