兼容主流浏览器的iframe自适应高度js脚本

兼容主流浏览器的 Iframe 自适应高度，js脚本如下：


代码如下:

//iframe 高度自适应
function iframeAutoFit(iframeObj) {
setTimeout(function () {
if (!iframeObj) return;
iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.body.offsetHeight);
}, 200);
}<span style="font-family: Arial, Helvetica, sans-serif;"> </span>

调用方法：


代码如下:

<iframe id="HQRight" name="HQRight" onload="javascript:iframeAutoFit(this);"
height="235px;" width="770px" frameborder="0" scrolling="no"
src="Market/HQData_page.aspx?t=tjs"></iframe>

扩展：


代码如下:

//动态添加样式
function addSheetFile(obj, path) {
if (obj == undefined || obj == null)
obj = document;

var fileref = obj.createElement("link")
fileref.rel = "stylesheet";
fileref.type = "text/css";
fileref.href = path;
fileref.media = "screen";
var headobj = obj.getElementsByTagName('head')[0];
headobj.appendChild(fileref);
}

赞 (0)

相关推荐

  • JS实现很实用的对联广告代码（可自适应高度）

    JS实现很实用的对联广告代码（可自适应高度）

    本文实例讲述了JS实现很实用的对联广告代码(可自适应高度).分享给大家供大家参考.具体如下: 这是一款很实用的基于JS+CSS+DIV的网页对联广告代码,自适应网页高度,也就是始终保持在一定调试,这款暂时没有关闭功能. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-lr-useful-adv-auto-height-codes/ 具体代码如下: <html> <head> <meta http-equiv="

  • js实现的真正的iframe高度自适应(兼容IE,FF,Opera)

    找到了下面这个js 复制代码 代码如下: function SetCwinHeight(obj) { var cwin=obj; if (document.getElementById) { if (cwin && !window.opera) { if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight) cwin.height = cwin.contentDocument.body.offset

  • Javascript 文本框textarea高度随内容自适应增长收缩

    直接上代码: 方案一: 枫芸志 » 文本框textarea高度自适应增长/伸缩 textarea { height:100px; width: 300px; } 晴枫制作 http://jb51.net // 最小高度 var minHeight = 100; // 最大高度,超过则出现滚动条 var maxHeight = 300; function ResizeTextarea(){ var t = document.getElementById('txtContent'); h = t.s

  • js实现iframe自动自适应高度的方法

    本文实例讲述了js实现iframe自动自适应高度的方法.分享给大家供大家参考.具体如下: 在编写网页的时候,很多时候要用到自动伸缩iframe高度 ,假如ifram中嵌入的是一个列表,那么增加数据后,刷新列表,iframe高度会自动伸长.删除数据后,iframe高度要自动缩短. 将下一段代码拷贝到iframe所在那个html或者jsp页面.在</html>标签后,调用此函数即可. <script type="text/javascript"> autoAdjus

  • 关于div自适应高度/左右高度自适应一致的js代码

    在使用DIV和CSS进行网页布局中,DIV的自适应高度和自适应宽度是一个很常见的问题. 为了保证页面的整体美观性,需要将两个或者多个层的高度/宽度保持一致. 左右自适应高度一致 Jquery 复制代码 代码如下: <div style="width:300px;"> <div id="Left" style="float:left;background-color:blue;">1<br/>3<br/&g

  • 使用javascript实现Iframe自适应高度

    方法一: 复制代码 代码如下: $(window.parent.document).find("#ContentIframe").load(function() {                     var main = $(window.parent.document).find("#ContentIframe");                     var thisheight = $(document).height();             

  • JS实现DIV高度自适应窗口示例

    本文实例讲述了JS实现DIV高度自适应窗口.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • JavaScript 处理Iframe自适应高度(同或不同域名下)

    1.同域名下Iframe自适应高度的处理 复制代码 代码如下: <iframe onload="Javascript:SetIFrameHeight(this)" src="../Home/b" id="win" name="win" width="100%" height="1"> </iframe> 当然此处我用的是Asp.Net MVC 此处src设置为路由

  • JS实现iframe自适应高度的方法示例

    本文实例讲述了JS实现iframe自适应高度的方法.分享给大家供大家参考,具体如下: <iframe id="mainFrame" name="mainFrame" src="/zwgk/hsearchview" width="740" frameborder="0" scrolling="no" scrolling="no" frameborder="

  • JS实现自适应高度表单文本框的方法

    本文实例讲述了JS实现自适应高度表单文本框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • js控制iframe的高度/宽度让其自适应内容

    复制代码 代码如下: <mce:script language= "Javascript "><!-- window.onload=function() { parent.document.all("iframe1").style.height = document.body.scrollHeight; parent.document.all("iframe1").style.width = document.body.scro

随机推荐