0

ここを参照してください: http://jsfiddle.net/5HYve/

<div style="position: fixed; top:0; right:0; width:300px; height: 100%; text-align:justify; overflow:hidden;" class="chat-container">
    <iframe id="chat_1" style="width:300px;height:100%;" scrolling="no" frameborder="0" src="http://www.twitch.tv/chat/embed?channel=riotgames&amp;hide_chat=myspace,facebook,twitter&amp;default_chat=jtv"></iframe>
</div>

結果象限のサイズを変更してみると、iframe 内のコンテンツが親のサイズに基づいてサイズ変更されないことがわかります。iframe 内のコードにアクセスできません。これを行う方法はありますか、それとも iframe 内の不十分な CSS に縛られていますか?

4

1 に答える 1

0

JS を使用して利用可能なウィンドウ サイズを検出しているようです。私が思いついたのは、ページのサイズ変更時に iframe の内容を更新することです。これを行う jQuery のスニペットを次に示します。

var 
    iframe = $('#chat_1'),
    url = iframe.attr('src');
$(window).on('resize',function(){
    iframe.attr('src',url);
})

デバウンス プラグインhttp://benalman.com/projects/jquery-throttle-debounce-plugin/を使用して、更新の回数を最小限に抑えることができます。

更新: http://jsfiddle.net/TyYj3/5/スニペットを使用した例を次に示します。

于 2013-02-12T07:32:08.267 に答える