読者です 読者をやめる 読者になる 読者になる

クロスドメインなiframeの高さを自動調整する(easyXDM版)

クロスドメインなiframeの高さを自動調整する(Porthole版) - think it over

にて、IEにおける動作に不安があったので、代替のeasyXDMについても試してみました。

1.easyXDMとは、

easyXDM is a Javascript library that enables you as a developer to easily work around the limitation set in place by the Same Origin Policy, in turn making it easy to communicate and expose javascript API’s across domain boundaries.

http://easyxdm.net/wp/

だ、そうです。
Porthole同様、背後ではpostMessageを利用しています。
なお、IE6, 7向けには NixTransportまたは、FlashTransportというもので実現しているようです。swfを置くアレ等ですね。(今回は調査してません)

2.親子の準備

easyXDMでは

consumer
the main document(=親)
provider
a document included using an iframe(=子)

という呼び方となります。

これまたどちらにもeasyXDMを読み込ませておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="container" style="width: 810px; margin: 0 auto;">
    <h1></h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <div id="iframeContainer"></div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="easyXDM.min.js"></script>
</html>

easyXDMはiframeを自動生成するため、それを内包する要素(div#iframeContainer)を定義しておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div>
<h1></h1>
<p>Lorem ipsum dolor sit amet....</p>
</div>
<script type="text/javascript" src="easyXDM.min.js"></script>
</body>
</html>

Portholeと変わらず。
コンテンツに十分な高さを持たせた方がわかりやすいです。

3.子から親へメッセージを送信する

<script type="text/javascript">
var test = {
    easyXDM : easyXDM.noConflict("test")
};
var socket = new test.easyXDM.Socket({
    onReady : function() {
        socket.postMessage(document.documentElement.scrollHeight)
    }
});
</script>
  • noConflictは念のため
  • 諸々の準備が整ったら(onReady)、postMessageでメッセージを送信します。
    • 誰に?ってのは不要のようです

4.子からのメッセージを受け取ってiframeの高さを調整する

<script type="text/javascript">
var test = { easyXDM: easyXDM.noConflict("test") };
$(document).ready(function() {
    var socket = new test.easyXDM.Socket({
        remote: "https://bbb,example.com/child.html",
        container: "iframeContainer",
        props: {
            id: "childIFrame",
            width: "810px",
            scrolling: "no",
            frameborder: "0"
        },
        onMessage: function(message, origin){
            $("#childIFrame").height(message);
        }
    });
});
</script>
  • remoteオプションにproviderのURLを指定します。
  • iframeの生成も行ってます。
    • containerにiframeを内包する要素を指定します。
    • propsにiframeの属性を指定します。
  • メッセージを受信した際の振る舞いをonMessageに定義します。

5.動作確認

今回はちゃんとIEでも。
IE10のエンジン切り替えでは7,8,9,10のすべてで期待どおりの動作となりました。

  • ビフォー

  • アフター

6.最後に

Portholeにしても、easyXDMにしても双方のドメインに手を入れないといけないので、状況によっては採用できないかもしれませんねー。
ま、このエントリが何かのお役に立てば。。。