iframe src为图片时的高度自适应的代码

 更新时间:2007年10月29日 20:42:16   作者:  
对于iframe高度自适应的问题,网上已经被讨论n次了,一般通过在iframe加载完毕时访问iframe内页body的offsetHeight和offsetWidth然后更新iframe的高宽来实现。 
        今日遇到的自适应问题与以往有一些不同,这次的src是一张图片,而且是一张大小不确定的图片(从数据库取出来的数据生成的),在此使用以往的方式似乎就没有那么灵验了。突然想到img标记的高宽是可以获取到的。于是突然有了思路。 

解决办法如下: 
       先动态生成一个img元素,在iframe页面加载完成时(onload)将其src赋给img标记,然后获取该img的高宽,再动态修改iframe高宽即可,同时不要忘了设定iframe页面body的margin和padding为0,否则会由于padding和margin默认不为0的缘故导致出现滚动条。

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

相关文章

  • 一文学会用JS判断文字是否被省略(ellipsis)

    一文学会用JS判断文字是否被省略(ellipsis)

    这篇文章主要给大家介绍了用JS如何判断文字被省略ellipsis,CSS帮我们搞定了省略,但是JS并不知道文本什么时候被省略了,所以我们得通过JS来计算,接下来,我将介绍2种方法来实现JS计算省略,需要的朋友可以参考下
    2023-08-08
  • 教你JavaScript利用charAt()统计出现次数最多的字符和次数

    教你JavaScript利用charAt()统计出现次数最多的字符和次数

    这篇文章主要介绍了JavaScript利用charAt()统计出现次数最多的字符和次数的操作方法,本文以判断一个字符串'aabcdobdackoppz'中出现次数最多的字符,并统计其次数为例,通过实例代码给大家详细介绍,需要的朋友参考下吧
    2021-08-08
  • 写给小白的JavaScript引擎指南

    写给小白的JavaScript引擎指南

    有时编写 Web 应用的代码会感觉充满魔力,因为我们只是写了一系列字符,就能在浏览器里看到效果了。但是理解魔法背后的技术,可以帮助你更好地提高编程技巧
    2015-12-12
  • js,jquery滚动/跳转页面到指定位置的实现思路

    js,jquery滚动/跳转页面到指定位置的实现思路

    这篇文章主要介绍了如何通过js或jquery滚动/跳转页面到指定位置,需要的朋友可以参考下
    2014-06-06
  • JS实现的A*寻路算法详解

    JS实现的A*寻路算法详解

    这篇文章主要介绍了JS实现的A*寻路算法,结合实例形式详细分析了A*寻路算法的概念、原理、实现技巧与相关注意事项,需要的朋友可以参考下
    2018-12-12
  • js 动态创建 html元素

    js 动态创建 html元素

    最近在学习js 写了个简单的效果,菜鸟可以学习学习,基本原理:使用随即数设置top 和left的值,
    2009-07-07
  • getElementByIdx_x js自定义getElementById函数

    getElementByIdx_x js自定义getElementById函数

    最近看JS代码,发现不少人问getElementByIdx_x是什么函数,其实就是个getElementById自定义函数
    2012-01-01
  • JS实现服务五星好评

    JS实现服务五星好评

    这篇文章主要为大家详细介绍了JS实现服务五星好评,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • js 执行上下文和作用域的相关总结

    js 执行上下文和作用域的相关总结

    这篇文章主要介绍了js 执行上下文和作用域的相关知识总结,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2021-02-02
  • Bootstrap富文本组件wysiwyg数据保存到mysql的方法

    Bootstrap富文本组件wysiwyg数据保存到mysql的方法

    这篇文章主要为大家详细介绍了Bootstrap富文本组件wysiwyg数据保存到mysql的方法,感兴趣的小伙伴们可以参考一下
    2016-05-05

最新评论