• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 自动适应iframe右边的高度

自动适应iframe右边的高度

作者:以茜为贵 字体:[增加 减小] 来源:互联网

以茜为贵 通过本文主要向大家介绍了自适应,iframe,高度等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

在开发项目过程中,用iframe嵌套,会发现一个问题,用iframe嵌套的html结构右边不会自动适应高度。

这时候找到了一个解决方法:

<iframe name="my_iframe" id="mainframe" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" width="100%" height="100%" src=""></iframe>

2、记住要引入iframe.js文件

<script type="text/javascript" src="js/iframe.js" ></script>

下面是iframe.js的具体内容

var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);
var isIE9More = (! -[1, ] == false);
function reinitIframe(iframeId, minHeight) {
  try {
    var iframe = document.getElementById(iframeId);
    var bHeight = 0;
    if (isChrome == false && isSafari == false)
      bHeight = iframe.contentWindow.document.body.scrollHeight;
    var dHeight = 0;
    if (isFireFox == true)
      dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
    else if (isIE == false && isOpera == false)
      dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
    else if (isIE == true && isIE9More) {//ie9+
      var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
      if (heightDeviation == 0) {
        bHeight += 3;
      } else if (heightDeviation != 3) {
        eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
        bHeight += 3;
      }
    }
    else//ie[6-8]、OPERA
      bHeight += 3;
    var height = Math.max(bHeight, dHeight);
    if (height < minHeight) height = minHeight;
    iframe.style.height = height + "px";
  } catch (ex) { }
}
function startInit(iframeId, minHeight) {
  eval("window.IE9MoreRealHeight" + iframeId + "=0");
  window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jquery实现自适应banner焦点图
  • 自动适应iframe右边的高度
  • jQuery实现两列等高并自适应高度
  • 懒加载实现的分页&&网站footer自适应
  • jQuery自适应轮播图插件Swiper用法示例
  • jQuery简单实现iframe的高度根据页面内容自适应的方法
  • EasyUI布局 高度自适应
  • JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
  • jQuery实现布局高宽自适应的简单实例
  • jquery自适应布局的简单实例

相关文章

  • jquery与ajax获取特殊字符实例详解
  • jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
  • jquery在项目中做复选框时遇到的一些问题笔记
  • jquery实现带缩略图的可定制高度画廊效果(5种)
  • jquery+ajax实现省市区三级联动效果简单示例
  • jquery 事件执行检测代码
  • JQuery调用WebServices的方法和4个实例
  • 基于jquery实现后台左侧菜单点击上下滑动显示
  • 用jQuery做更好的组件 通用组件定义模式
  • 基于jQuery实现表单提交验证

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jquery实现弹出div,始终显示在屏幕正中间的简单实例
    • 基于jquery的手风琴图片展示效果实现方法
    • jquery实现输入框动态增减的实例代码
    • Confirmer JQuery确认对话框组件
    • 基于jquery实现拆分姓名的方法(纯JS版)
    • jQuery实现水平和垂直居中
    • Jquery实现视频播放页面的关灯开灯效果
    • jQuery点击弹出层弹出模态框点击模态框消失代码分享
    • jquery操作cookie插件分享
    • JQuery分屏指示器图片轮换效果实例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有