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);
})

您可能希望使用debounce插件http://benalman.com/projects/jquery-throttle-debounce-plugin/来最小化刷新次数。

更新：http://jsfiddle.net/TyYj3/5/这是您使用代码段的示例。

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

1 个答案: