iFrameのサイズを取得して、自動サイズ調整。＆「5002 : 関数を指定してください」回避

ヘッダ部分に以下を記述。

<script language="javascript" type="text/javascript">

function iFrameHeight() {
var h = 0;

// Opera
if (window.opera)
{
h = document.getElementById('example').contentDocument.getElementById('inHeight').offsetHeight + 20;
document.getElementById('example').setAttribute("height",h);
}

// Safari ~ Chrome
else if (/WebKit/i.test(navigator.userAgent))
{
var posVersion = navigator.userAgent.indexOf("WebKit/");
var version = navigator.userAgent.substring(posVersion + 7, posVersion + 10);
if (parseInt(version) >= 523) // Safari 3+
{
document.getElementById('example').style.height = '20px';
}
else // Safari 1+ or 2+
{
return document.getElementById('example').style.height = '152px';
}
h = document.getElementById('example').contentDocument.height;
document.getElementById('example').style.height = h + 'px';
}

// IE
else if( document.all )
{
h = document.frames('example').document.body.scrollHeight;
document.all.example.style.height = h + 30 + 'px';
}

// Misc
else
{
h = document.getElementById('example').contentDocument.height;
document.getElementById('example').style.height = h + 65 + 'px';
}
}

</script>



BODY部分に以下のように記述する。


<iframe
id="example"
name="iframe"
src="読み込みたいページのソース"
width="100%"
height="100%"
scrolling="no"
align="top"
frameborder="0"
onload="iFrameHeight()">
</iframe>



しかし…本当に使いにくいな…アメブロのエディタは。




追記。

// IE
else if( document.all )
{
h = document.frames('example').document.body.scrollHeight;
document.all.example.style.height = h + 30 + 'px';
}

の青い部分を


h = document.frames.example.document.body.scrollHeight;

にしとかないと、IE9で「5002 : 関数を指定してください」ってエラーが出るょ。

それから、クロスサイトには無効です。
なので、一度クロスサイトのコンテンツをまるっと（サーバー上に）持ってきて、そいつをiFrameで読み込むようにしないとです。

まあ、特殊な案件でない限りそんなことをする必要はないのだけれど、MySQLが使えない・php-mysqlが入っていないサーバー上からMySQLを使って処理をしたいなんて案件の場合には…。

サーバー引越しちゃえば？って言いたいけど、そうもいかないクライアントもいたりして…。
大変です。