5

iframeDrupal ページに を含めようとしています。これまでのところ、フレームを含めることに成功しましたが、私が書いた高さのサイズ変更機能は Internet Explorer でしか機能しません。私の目標は、Firefox と Chrome でもサイズ変更が機能するようにすることです。インターネットで検索しましたが、探しているものが見つかりませんでした。簡単に言えば、フレームの高さ自体を自動的にサイズ変更したいのです。

これは私がこれまでに行ったことです (これは Drupal に含まれる HTML ページのコードです):

<script type="text/javascript">
    function resize() {
        var iframe = document.all.icw;
        document.getElementById("icw").style.height = iframe.document.body.scrollHeight + "px";
    }
</script>
<iframe id="icw" src="XXXXX" width="100%" scrolling="no" onload="resize()">

iframe別のドメインに住んでいる場合、アクセス許可のために解決がより困難になる可能性があることを理解しています。あれは正しいですか？

これらは、Chrome と Firefox で発生するエラーです。

Chrome: 未定義のプロパティ 'body' を読み取れません

Chrome: JavaScript が URL YYY のフレームから URL XXX のフレームにアクセスしようとしています。ドメイン、プロトコル、およびポートが一致する必要があります。

Firefox: document.all が定義されていません

編集:iframe要素の1つを変更したい場合はどうすればよいですか? 私の場合、テキストボックスの値を変更する必要があります。ページがロードされたときにそれをしなければならないことは理解していますが、解決策が見つかりません。コードをどこに置いても、常に

未定義のメソッド「getElementById」を呼び出せません

iFrame テキストボックスにアクセスしようとすると。

EDIT2:関連していないため、新しい質問をしました。

4

3 に答える 3

5

このソリューションは、両方にアクセスできる限り、クロスドメインでも機能します. エッジケースはたくさんありますが、少なくともこれで始めることができます。タイマーイベントを追加して、iFrame が常に正しいサイズであることを確認して、スクロールバーがないようにすることもできます。postMessage を使用しているため、これは HTML5 をサポートするブラウザーでのみ機能することに注意してください。

iFrame 内

function resize(){
    var body = document.body,
    html = document.documentElement,
    height = body.offsetHeight;
    if(height === 0){
        height = html.offsetHeight;
    }
    parent.postMessage({'action':'RESIZE', 'height':height}, '*');
}

親

function handleMessage(e) {
    if (e.data.action == 'RESIZE') {
        var targetHeight = e.data.height;
        $('#iFrame').height(targetHeight);
    }
}

window.addEventListener("message", handleMessage, false);
于 2012-10-30T13:29:14.313 に答える
2 
window.addEventListener("message", handleMessage, false);

このコードは IE では機能しません。

IE用

window.attachEvent("onmessage", handleMessage, false);
于 2013-09-26T12:52:47.520 に答える
1

これを行い、他のすべてのエッジケースを管理するこの小さなライブラリをチェックしてください。

https://github.com/davidjbradshaw/iframe-resizer

于 2014-03-12T21:01:37.343 に答える