场景:Iframe嵌入flash,希望flash能随着页面的resize而resize。
主要代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="/lrm-suite/js/jquery-2.0.3.js"></script> <script type="text/javascript"> var rpUrl = 'http://172.20.31.18:8080/lrm-suite/rp.xhtml'; function setAppFrameUrl(selectedUrl) { if ($.isReady) { activeUrl = selectedUrl; $('#appFrame' ).setAttribute('src', selectedUrl); } else { setTimeout(function() { setAppFrameUrl(selectedUrl); }, 100); } } function setNewActive(imgComp,urlName,imageSrc){ setAppFrameUrl(urlName); imgComp.src = imageSrc; } $(document).ready(function(){ $(window).resize(resizeframe); }); function resizeframe() { var margin-top = $('#appFrame' ).css( "margin-top" ); var topNum = margin-top.toString().slice(0,margin-top.length-2); var actualHeight = document.body.offsetHeight - topNum; $('#appFrame').css('height', actualHeight); } </script> </head> <body> <div class="topMenuBar" id="topMenuBarDiv" style="z-index: 999999"> <a id="j_idt8"> <img src="/lrm-suite/images/Logo.png" alt="" style="float: left; border: 0; cursor: pointer;" onclick="setNewActive(this,rpUrl,'/lrm-suite/images/Logo.png');"/> </a> . . . . </div> <iframe id="appFrame" style="border: 0; width: 100%; position: absolute; top: 0; left: 0; margin-top: 43px;" src="" scrolling="auto" frameborder="0" onload="resizeframe()"> </iframe> </body> </html>
分析:
首先导入JQuery框架,并设置iframe的scrolling=“auto”,这样的话可以自动的出现滚动条。
然后添加window的resize事件
$(document).ready(function(){ $(window).resize(resizeframe); }); function resizeframe() { var margin-top = $('#appFrame' ).css( "margin-top" ); var topNum = margin-top.toString().slice(0,margin-top.length-2); var actualHeight = document.body.offsetHeight - topNum; $('#appFrame').css('height', actualHeight); }
这样的话,每次浏览器resize的话,都会对iframe重新设置height,从而得到iframe resize的效果。
后来有人给出了一个另外的解决方案,跟这个原理类似,也贴出来以供参考。
var suiteVisible = true; function resizeIframe() { var el = document.getElementById("appFrame"); if (suiteVisible) { el.style.height = (document.body.clientHeight - 43) + "px"; } else { el.style.height = (document.body.clientHeight) + "px"; } } $(window).resize(function() { if (this.resizeTO) clearTimeout(this.resizeTO); this.resizeTO = setTimeout(function() { $(this).trigger('resizeEnd'); }, 500); }); $(window).bind('resizeEnd', function() { resizeIframe(); });
相关推荐
兼容IE 6+ 、火狐、谷歌、等浏览器的Javascript 自动适应高的的IFrame
主要介绍了JavaScript实现iframe自动高度调整和不同主域名跨域,作者通过建立一个代理来同步高度调整,需要的朋友可以参考下
iframe 自动获取onload高宽 代码如下: function AutoResize(iframe) { //firefox if(iframe.contentWindow) { iframe.height = iframe.contentWindow.document.documentElement.scrollHeight; iframe.width = iframe...
动态的改变IFrame的高度,实现IFrame自动伸展,父页面也自动神缩 原理: 在IFrame子页面一加载的时候,调用父IFrame对象,改变其高度 具体实现一: 1、在IFrame的具体页面(就是子页面),添加JavaScript 代码如下: ...
iFrame自动调整大小用于创建自动调整大小的 iFrame 的 JavaScript 库,即使它们来自不同的域用法: :
1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒...
自动调整 iframe 的大小以匹配其内容的高度并且根本没有滚动条。 演示 跨浏览器测试 自动调整大小的代码 var iframe = document.querySelector('iframe'); iframe.onload = function() { iframe.height = Math.max...
iframe尺寸调整器React 该库是用于的官方React接口,该接口可自动调整相同和跨域iFrame的高度和宽度,以适应其包含的内容。 它提供了一系列功能来解决使用iFrame时最常见的问题,其中包括: 将iFrame的高度和宽度...
1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒...
iframe调整大小 一个简单的实用程序,可将iframe调整为其内容的大小。 用法 $('iframe').iframeResize(); 这会将加载事件处理程序...iframeResize-min-height可用于为iframe设置默认高度,并在加载内容时自动将其删除。
iFrame Resizer V4 通过该库,可以自动调整相同和跨域iFrame的高度和宽度的大小,以适合其包含的内容。 它提供了一系列功能来解决使用iFrame时最常见的问题,其中包括: 将iFrame调整为内容大小的高度和宽度。 适用...
FlexImages 是一款轻量级的 JavaScript 画廊插件,图片源可以是托管在 Flickr 上的图片,或者 Google 图库。无需任何依赖,支持Firefox, Safari, Chrome, Opera, Internet Explorer 8以上版本。效果图:特点:轻便,...
于是自动调整iframe的高度就成为本文的重点。 采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引 发出同域、跨域两种情况。 同域时Iframe高度自适应 ...
在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面,这样当父页面被访问的时候,子页面可以被自动加载。iframe的高度需要根据子页面的实际高度来进行调整。如果iframe的高度小于子页面的...
当使用Dialog嵌入跨域iframe时,在iframe内使用这个组件自动同步高度,并且提供API从内部关闭浮层、设置浮层高度。 内部使用进行跨域通信,当需要调整页面高度或者关闭浮层时,向父页面发送消息,父页面中的Dialog...
无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验, 日期控件是可以跨无限级框架显示的,并且当控件处在页面边界时,它会自动选择显示的位置.此外你还可以使用position参数对弹出位置做...
根据内容自动调整 iframe 的高度在 iframe 中添加这个脚本: FTVEN.iframeComIframe.autoresizeHeight();在父窗口中 iframe . myIframe { width : 300 px ; height : 400 px ; /* it's important to set an height *...