iframe 没有与它的父窗口一起调整大小

Question

请看这里：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 所束缚？

Answer 1

看起来他们正在使用 JS 来检测可用的窗口大小。我能想到的最好的办法是在页面调整大小时刷新 iframe 内容。这是 jQuery 的 sn-p 可以做到这一点。

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/ 这是您使用 sn-p 的示例。