3

私はクライアントと仕事をしています。彼らのウェブページはこのDOCTYPEを使用しています

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

彼らのサイトのページにコンテンツを配信する必要があります。私のコンテンツはこんな感じ

    <div style="height:1000px">
    <iframe frameborder="0" src="..." width="550" height="220"></iframe>
    <br/>
    <br/>
    <iframe frameborder="0" src="..." width="550" height="220"></iframe>
    </div>

数行のcss、現在、およびiframeをクライアントページに配置することで、コンテンツをクライアントページに配置できます。

<style>
.iframecontent
{
    background-color:blue;
    position: relative;
height: 100%;
width: 100%
}
</style>

<iframe class="iframecontent" frameborder="0" src="..." width="100%" scrolling="no"> </iframe>

コンテンツの高さは動的であるため、クライアントに特定の高さを提供することはできません。代わりに、コンテンツを伸ばす必要があります。

私は多くの投稿を読みましたが、これを行うための最良の方法はまだわかりません。おそらくCORS？他に何かありますか？

提供されるソリューションの1つを次に示します。http：//sly777.github.com/Iframe-Height-Jquery-Plugin/-同じドメインで動作しますが、クロスドメイントークでは、HTML5のものであるPostMessageに依存します。

http://blog.johnmckerrell.com/2006/10/22/resizing-iframes-across-domains/を試しましたが、動作させることができませんでした。

クライアントにフレームを1500pxに設定してもらい、コンテンツに含めることを選択してそれを実行するように設定することもできますが、もっと良い方法はありますか？

4

3 に答える 3

0

設定していただけませhtml,body{height:100%;}んiframe{height:100%}か？

パーセンテージの高さは、（ブロック要素の）親の高さに直接依存します。つまり、iframeは100％何ですか？この場合、その親は本体です。

于 2012-11-08T20:42:02.293 に答える
0

postMessage プラグインhttp://benalman.com/projects/jquery-postmessage-plugin/を使用できます。

これにより、iframe 内から親要素にメッセージを投稿できます。setInterval javascript 関数を組み合わせて、現在必要なサイズを親要素に送信できます。

iframe 内

var currentIframeSize = 0; 
window.setInterval(function() {
    var size = $('body').outerHeight(true);
    //just post, if the size has changed
    if ( currentIframeSize != size ){
        currentIframeSize = size;
        $.postMessage({if_height : size}, source_url, parent);
    }
}, 1000); //do that every second

親要素の head セクション内

id = "theIdOfYourIframe";
$.receiveMessage(function(e){
    var rec_height = Number( e.data.replace( /.*if_height=(\d+)(?:&|$)/, '$1' ) );
    if ( !isNaN( rec_height ) && rec_height > 0 && rec_height !== current_height ) {  
        current_height = rec_height;
        $('#' + id).height(rec_height);
    }
});

これら2つのスニペットに基づいて、問題を解決する必要があります

于 2012-11-18T13:16:02.147 に答える
0

あなたが試したプラグイン ( http://sly777.github.com/Iframe-Height-Jquery-Plugin/ ) を更新し、このプラグインをクロスドメイン修正に使用する方法のチュートリアルを追加しました。お役に立てば幸いです。

于 2013-02-20T22:18:12.097 に答える