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