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

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

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

１．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を置くアレ等ですね。（今回は調査してません）

２．親子の準備

easyXDMでは

consumer: the main document（=親）
provider: a document included using an iframe（=子）

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

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

consume：親（http://aaa.example.com/parent.html）

<!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）を定義しておきます。

provider：子（http://bbb.example.com/child.html）

<!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と変わらず。
コンテンツに十分な高さを持たせた方がわかりやすいです。

３．子から親へメッセージを送信する

<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でメッセージを送信します。
- 誰に？ってのは不要のようです

４．子からのメッセージを受け取って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>