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 中的代码。有没有办法做到这一点，或者我是否会受到 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/这是您的示例代码片段。