html - 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 中的代码。有没有办法做到这一点，或者我是否绑定(bind)到 iframe 中写得不好的 CSS？

Answer 1

看起来他们正在使用 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/这是您的代码片段示例。