CMSで生成したhtmlを、別サーバのhtmlでiframeを使って表示する場合、高さが算出できない件
タイトル通りの件で悩んだのでメモ。
同じサーバの場合は話が早いです。
jsでiframeで呼び出すコンテンツの高さを取ってきて、動的に書き換えればOK。
ie6以外のブラウザは、
contentWindow.document.documentElement.scrollHeight;
ie6は、
contentWindow.document.body.scrollHeight;
で、iframeの内容の高さを取って来れます。
それを、jQueryの$('iframe').height();とかで設定してやればいけます。
しかし、
問題は違うサーバ間です。
この場合、jsだけで同じ事をしようとすると、「クロスドメイン」制約というモノにより、上記の方法だと値の取得が不可能です。
クロスドメイン、初めて知りました；
いろいろ悩んだ挙句の打開策です。
jQueryのメソッドに、$.getJSONというのがあります。
これは、jsonやjsonp方式で記述されたデータを読み、コールバック関数でそれの処理をできるという物。この場合、jsonpを使います。（jsonでもクロスドメインの制約があるらしい
要は、
CMS側でjsonpファイル生成→非CMS側からjsonpを読む→そのデータを使ってhtmlを生成→iframeをとっぱらって生成したhtmlを挿入
という流れです。
まず、CMSでjsonpファイルのテンプレートを作ります。書式はこう。
CMSはMTを想定してるのでMTタグが入ってます。
jsonColback({"entries": [
<mt:Entries>
{
title: ’<$MTEntryTitle$>’,
body : ’<$MTEntryBody regex_replace="/
/g",""$>’
}<mt:Unless name="__last__">,</mt:Unless>
</mt:Entries>
]})
EntryBodyのモディファイアは、改行コードを削除する処理をしていますが、\nしか消してません；これだとおそらく足りないですよね？
改行コード、よくわかりません；
このテンプレートで生成したファイルを、entry.jsonpとします。
これを、$.getJSONを使って読み込み、処理します。
$(function(){
$.getJSON("http://www.hogehoge.net/entry.jsonp?callback=?");
});
var jsonColback = function(jsonData){
var iframeHTML = "";
$(jsonData.entries).each(function(){
iframeHTML += '<div class="article">';
iframeHTML += '<h4>'+this.title+'</h4>';
iframeHTML += '<p>'+this.body+'</p>';
iframeHTML += '</div>';
});
$('#hoge').html(iframeHTML);
}
という感じです。
読み込むときの、「?callback=?」は何をしているのかわかってません；でも必須のようです。
とってきたデータを、.eachで回して処理しています。
最後に、生成したhtmlをiframeのあったところに挿入します。
結果的に、「iframeの高さを算出する」という目的からは外れてしまってますが、jsが効いていない状況でもiframeでのコンテンツは生きてますし、当面の打開策としてはいいのではないかと思います。
SEO的にはどうなんだろう？
参考にさせていただいたのは、以下のリンク。
JSONとJSONP
