0

これは何度も尋ねられてきましたが、解決策がうまくいかず、適切な種類の解決策があまり見つからないため、質問します. 静的な幅が必要ですが、内部コンテンツに基づいた動的な高さが必要です。

サブドメインでブログをホストしていて、iframe 経由でメイン ドメインのページに挿入しています。ユーザーが引き続きブログを使用できるように、静的な高さとスクロールを設定することもできますが、見栄えを良くする必要があります。新しい投稿を作成するか、ユーザーがコメント セクションをクリックすると、iframe のサイズが自動的に調整され、スクロール バーなしですべてのコンテンツを表示できるようになります。

これまでのところ、機能する解決策は見つかりませんでした。主な理由は、多くの場合、同じドメインにあるページが関係しているためです。

4

2 に答える 2

2

iframe のコンテンツを制御できるため、ウィンドウメッセージイベントを試すことができます。

これをフレーム コンテンツに追加します。

// post a message to the top window with information about the height
window.onload = function(){
    top.postMessage(document.body.scrollHeight, '*');
}

そして、これを iframe を含むページに:

// listen for the message and set the iframe height when it arrives
window.addEventListener( "message", function(event){
    document.getElementById('test').style.height = event.data+'px';
}, false);

<iframe id="test" src="test.html"/>

あなたのコメントに応えて。iframe のコンテンツが変更されたときに iframe の高さを更新する方法をいくつか紹介します。

1. 突然変異イベント

// listen to all descendants of the body and if there are any modifications, post an update to the top window 
document.body.addEventListener("DOMSubtreeModified", function(){
    top.postMessage(document.body.scrollHeight, '*');
}, false);

そのアプローチは減価償却されています。これは代替品ですが、まだ完全にはサポートされていません:

2. 突然変異観察者

// create a MutationObserver to listen for modification to the body and post an update to the top window
var observer = new MutationObserver(function(){
    top.postMessage(document.body.scrollHeight, '*');
});
observer.observe(document.body, {childList: true, subtree: true});

2番目のオプションがより適切にサポートされるまで、最初のオプションを使用します

于 2013-04-14T01:01:35.053 に答える
0

iFrameのサイズを計算するために、offsetHeightはscrollHeightよりも信頼性が高いと付け加えたいと思いました。本文のマージンが 0 に設定されている限り。問題は、ScrollHeight がページのサイズを拡大するだけで、縮小しないことです。マージンの問題は克服できますが、 IE8を気にする場合は大量のコードになります。

MutationEvents は無効です。MutationObserver を使用してください。IE10 以下では機能しないため、setIntervalにフォールバックする必要があります。ユーザーに画面のちらつきを見せたくない場合は、 32のタイマーで使用する必要があります。RequestAnimationFrameは、画面のちらつきをカットするのにも役立ちます。

これらすべての問題を扱っているhttps://github.com/davidjbradshaw/iframe-resizerをご覧ください。

于 2014-03-21T23:56:00.597 に答える