1、iframe自适应页面高度

首先需要给iframe设置一个id,不需要滚动条则加上scrolling="no"

然后加上一个onload事件

function iFrameHeight(iframe) {   var ifm= document.getElementById(iframe.id);   var subWeb = document.frames ? document.frames[iframe.id].document : ifm.contentDocument;   if(ifm != null && subWeb != null) {ifm.height = subWeb.body.scrollHeight;ifm.width = subWeb.body.scrollWidth;}
} <iframe src=' ' width='100%'  id="compInfo" frameborder='0'scrolling="no"  οnlοad="iFrameHeight(this)"></iframe>

2、若需要iframe固定一个高度,超过这个高度才自适应

function iFrameHeightContact(iframe) {   var ifm= document.getElementById(iframe.id);   var subWeb = document.frames ? document.frames[iframe.id].document : ifm.contentDocument;   if(ifm != null && subWeb != null) {var ifmHeight = subWeb.body.scrollHeight;var ifmWidth = subWeb.body.scrollWidth;if(ifmHeight<400){ifm.height = 400;ifm.width = ifmWidth;} else {ifm.height = ifmHeight;ifm.width = ifmWidth;}}
} <iframe src=' ' width='100%'  id="compInfo" frameborder='0'scrolling="no"  οnlοad="iFrameHeight(this)"></iframe>

* 400则为你想要固定的高度

												

jquery实现iframe自适应高度相关推荐

  1. jquery 实现iframe 自适应高度

    转自: http://www.cnblogs.com/luluping/archive/2009/04/17/1437843.html 超级简单的方法,也不用写什么判断浏览器高度.宽度啥的. 下面的两 ...

  2. [转]让iframe自适应高度-真正解决

    原文地址:https://www.cnblogs.com/rogge7/p/7762052.html 需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同 ...

  3. 【前端开发】前端引入公共部分footer header的几种方法,及iframe自适应高度js

    一.引入页面几种方法 1.IFrame引入,看看下面的代码  <iframe   frameborder=0   border=0   width=300   height=300   src= ...

  4. Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐[转]

    Iframe自适应高度绝对好使的代码,IE.遨游.火狐.Chrome都兼容,需要的朋友可以参考下. 这是我试了很多相关代码后发现的兼容性最好的Iframe自适应高度代码. <script typ ...

  5. php iframe 自适应高度,两个iframe自适应高度的解决方法

    很多小伙伴在做网站的时候对于解决 1.需求分析: 使页面中的iframe可以自适应高度,避免页面高度增加的时候页面和iframe会同时出现滚动条. 2.方法一: 在iframe上面直接加onload的 ...

  6. 跨域下的iframe自适应高度

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  7. iframe 自适应高度的多种实现方式

    iframe高度自适应内容 需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象. 设置iframe 自适应高度,使其等于内嵌网页的高度 ...

  8. php iframe 自适应高度,iframe自适应高度

    很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事,今天吾爱编程为大家介绍一下iframe自适应高度的方法,有需要的小伙伴可以参考一下: 1.需求分析: 使页面中的iframe可 ...

  9. php iframe 自适应高度,让iframe自适应高度的讲解

    为什么需要使用iframe自适应高度呢?其实就是为了美观,要不然iframe和窗口长短大小不一,看起来总是不那么舒服,特别是对于我们这些编程的来说,如鲠在喉的感觉.在页面中通过iframe嵌入了另外一 ...

最新文章

  1. PYTHON编码处理-str与Unicode的区别
  2. Android ListView存在多个item样式的处理方法
  3. Maven提高篇系列之(三)——使用自己的Repository(Nexus)
  4. jq 点击导航添加背景_jq入门(2)css选择符
  5. createSQLQuery与createQuery的区别
  6. 边界条件(求解偏微分方程的边界条件)
  7. java数组r.id_Android HelloViews Spinner教程R.id和R.array无法解析
  8. 【PHP基础】文件操作
  9. 2021-3测试通过:eclipse安装svn插件
  10. Swiper 触屏滑动切换
  11. 期刊分类abcde_期刊分类
  12. 向日葵显示服务器连接失败,向日葵连接服务器成功远程不
  13. Web框架-SSM框架
  14. YGG Pilipinas: 台风奥黛特救灾工作更新
  15. 阿里巴巴宣布传承计划,没有马云的阿里会如何?
  16. CAD打断曲线(网页版)
  17. 通过SyncToy进行服务器定时服务备份流程
  18. maya linux 安装教程视频,在 Ubuntu 上安装 Maya 2020 - Flame.VIP
  19. java 九九乘法口诀
  20. cad怎么将图层后置_CAD图层遮挡,如何将CAD图形进行前置或者后置?

热门文章

  1. 7 For All Mankind推出N°21 x 7 For All Mankind 胶囊系列
  2. Zookeeper下载安装教程(windows系统)
  3. 字节跳动小程序点击右上角分享胶囊设置“拍抖音”和“分享”功能
  4. 愤怒的小鸟计算机教案,愤怒的小鸟教案.doc
  5. Jasperreport 导出pdf 中文不显示问题
  6. C#中的结构体与类的区别
  7. 【青书学堂】管理学基础(直播课) 第一学期 作业
  8. Java键盘输入一个数字, 输出其绝对值
  9. hidd是什么进程_什么是hidd,为什么它可以在Mac上运行?
  10. 心系区域发展,高德用一体化出行服务平台“聚”力区域未来