基于jQuery/Javascript内部内容使iframe高度动态
基于jQuery/Javascript内部内容使iframe高度动态
div
$("#TB_window", window.parent.document).height($("body").height() + 50);TB_windowIframe
body
TB_window
陪伴而非守候浏览 417回答 3
3回答
-
慕标琳琳
控件的高度。IFRAME的内容使用：contentWindow.document.body.scrollHeight在.之后IFRAME加载后，可以通过以下操作更改高度：<script type="text/javascript"> function iframeLoaded() { var iFrameID = document.getElementById('idIframe'); if(iFrameID) { // here you can make the height, I delete it first, then I make it again iFrameID.height = ""; iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px"; } }</script>然后，在IFRAME标记，您可以这样连接处理程序：<iframe id="idIframe" onload="iframeLoaded()" ...不久前我遇到了另外一个需要打电话的情况iframeLoaded从IFRAME在表单提交发生在.您可以通过在IFRAME内容脚本：parent.iframeLoaded(); -
一只名叫tom的猫
<script type="text/javascript"> function resizeIframe(iframe) { iframe.height = iframe.contentWindow.document.body.scrollHeight + "px"; }</script>然后在IFRAME中声明如下：<iframe onload="resizeIframe(this)" ...有两个小改进：您不需要通过document.getElementById获取元素，因为在onload回调中已经有了它。没有必要设置iframe.height = ""如果你要在下一个声明中重新分配它。这样做实际上会在处理DOM元素时产生开销。 -
有只小跳蛙
我发现接受的答案是不够的，因为X帧选项：允许-从在Safari或Chrome中不支持..使用不同的方法，在展示来自Disqus的本醋。这样做的目的是向父窗口添加一个事件侦听器，然后在iframe内部使用window.postMessage将一个事件发送给父窗口，告诉它做一些事情(调整iframe的大小)。因此，在父文档中，添加一个事件侦听器：window.addEventListener('message', function(e) { var $iframe = jQuery("#myIframe"); var eventName = e.data[0]; var data = e.data[1]; switch(eventName) { case 'setHeight': $iframe.height(data); break; }}, false);在iframe内部，编写一个函数来发布消息：function resize() { var height = document.getElementsByTagName("html")[0].scrollHeight; window.parent.postMessage(["setHeight", height], "*"); }最后，在iframe内部，向body标记添加一个onload，以触发调整大小函数：<body onLoad="resize();">
随时随地看视频慕课网APP
相关分类
JavaScript
JQuery