javascriptでiframeの高さを取得する

iframeで呼び出すページの高さを取得し、親ページ側でiframeのheightを最適化します。

実現にはいろいろな方法がありますが、この方法はiframeと親ページの両方にスクリプトを設置するやり方になります。クロスドメインで使えます。

まずiframe側に設置するスクリプト。
#containerの高さを取得して親ページに数値を渡します。

<script type="text/javascript">
window.addEventListener("load", postSize, false);
function postSize(e){
    var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
    if (typeof target != "undefined" && document.body.scrollHeight)
        target.postMessage(document.getElementById("container").scrollHeight, "*");
}
</script>


続いて親ページ側のスクリプト。
iframeから数値を受け取って高さを指定します。

<script type="text/javascript">
try { window.addEventListener("message", receiveSize, false); } 
catch(e) { window.attachEvent("onmessage", receiveSize); }

var rcnt = 0, new_height = 0;
function receiveSize(e) {
    new_height = Number(e.data)+30;
    document.getElementById("target_iframe").style.height = new_height + "px";
}
</script>

以上です。

参考にさせてもらったページはあったんですが、失念してしまいました。

Amazon PAAPIのカスタマーレビューiframe対応

またAmazon PAAPIネタです。

仕様変更のため、2010/11/09以降、PAAPIレスポンスデータからカスタマーレビューの文字情報が無くなり、かわりにiframe用のURLが返されるようになります。詳細はこちら。

ちなみに実際のIFrameURLの内容などは、Amazon商品情報ビューワーで見るとよくわかります。(最近このツールよく使ってます)


しかも合計レビュー数や評価平均などのサマリ情報も取得できなくなります。
これは過去何度かあったPAAPIの仕様変更の中でも、一番影響が大きいのではないかと思います。

この新仕様の制約の中で、どうすれば最善の対応ができるか。調べてみました。


、、、が、特にいい案も浮かばず。とりあえずはそのままiframeタグを使って表示するしかなさそうです。


iframeを使う上でネックになるのが高さ(height)です。
ひとまず適当に500pxとかで指定するんですが、レビューがないと下300pxくらいスカスカになってしまうし、逆にレビューが多いとスクロールバーが出てしまうので、インターフェース的にあまりキレイじゃないです。

JavaScriptでIFrameURLの高さを取得して、heightを動的に変更、なんてこともできるんでしょうけど、色々面倒なことになりそうです。

あとphpでincludeする方法もありますが、PAAPI公式ページのよくある質問に見ると、

IFRAMEのみが、現在カスタマーレビューデータを表示する唯一の方法となります。ご了承ください。

IFRAMEのみが、現在カスタマーレビューデータを表示する、Amazonにおける唯一の方法となります。

現状、IFRAMEのみがサポート対象となっております。当方としては、アソシエイトの皆様にAmazonの商品を紹介いただくお手伝いをするために、近い将来、他のフォーマットについてのサポートについても検討予定です。

と、IFRAMEのみを連呼されてるので、iframe以外の方法を使うとガイドライン違反と判定されてしまう可能性もなくはありません。

というわけで、ひとまず素直にiframeを使うことにして、しばらく様子をみてみようと思います。最後の近い将来、他のフォーマットについてのサポートについても検討予定です。というのに期待したいと思います。


あともうひとつの大きな問題として、携帯対応があります。

そもそもiframe対応していない機種はどうしようもありません。

実際に自分の端末(ドコモP-09A)で試してみたところ、iframeは表示できたのですが、iframeの枠をクリックしてフォーカスさせないとスクロールできないので、PC以上にインターフェースが分かりにくくなってしまいます。

それよりも問題なのがiframe内のリンクをクリックしてもPC用ページに飛んでしまうこと。携帯のことはまったく考慮されていないようです。

というわけで、携帯サイトのほうは現状ではレビュー表示なしにするしかない、という結論に至りました。



正直かなり残念な仕様変更ですが、もう決まってしまったことなので利用者としては変更にはおとなしく従い、今後のバージョンアップで改善されることを期待するしかないです。