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

对于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的缘故导致出现滚动条。

new document

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • jquery attr 设定src中含有&（宏）符号问题的解决方法

    问题描述: html代码如下: <iframe src="http://www.jb51.net" id="addOrUpdateIframe" style="width:870px;height:450px;" border="0" scrolling="yes" ></iframe> 我用 jquery 的attr 方法设定 iframe的src属性 $("#addOr

  • js实现的修改div里img标签的src属性

    无标题文档 function addmethod() { var table=document.getElementById("table"); var tr=table.firstChild.getElementsByTagName("tr")[0]; var arr=tr.getElementsByTagName("td"); for (var i=0;i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • javascript控制frame,iframe的src属性代码

    复制代码 代码如下: <script language="javascript"> <!-- function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r!=null) retur

  • javascript动态改变img的src属性图片不显示的解决方法

    首先讲下这个bug的出现的情况,页面中有 复制代码 代码如下: <a href="javascript:void(0)" onclick="document.getElementById('current').src='images/001.jpg';"> 这么一个a标签,onclick中的JS代码就是改变id为current的img标签的src属性,以达到动态切换图片的效果.可是不幸的是:IE是动态改变的图片的路径,但是图片却不显示出来,得右键&quo

  • 图片img的src不变让浏览器重新加载实现方法

    javascript给这个img标签的src属性后面拼接一个 ? 和 javascript对象new Date().getTime()毫秒值做成queryString的样子,就能防止被缓存了 在图片地址src不变的情况下让浏览器重新加载图片 实际上,在src不变时,浏览器直接就去读取缓存了 解决办法: var img_src ='http://www.ilsea.net/images/seagull.jpg?t='+Math.random(); 这样给图片地址拼接一个随机数,用js重新给 img

  • 求得div 下 img的src地址的js代码

    目的:求得div 下 img的src html: <div id="image1"><img src="loading.gif" /></div> <div id="image2"><img src="loading.gif" /></div> . . <div id="image12"><img src="

  • jquery img src 获取实现代码

    请"运行代码"后刷新一次. jquery img src怎么取 $(function(){ alert($(".imglogo").attr("src")); }) [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

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

  • IFrame跨域高度自适应实现代码

    复制代码 代码如下: var iframeids = ['memberIndexIframe','inquiryCenterIframe','everychinaBbsIframe']; var iframehide = "yes"; function dynIframeSize(){ var dyniframe = []; for(var i=0;i<iframeids.length;i++){ if(!document.getElementById) return false

  • file模式访问网页时iframe高度自适应解决方案

    最近做到iframe的高度自适应这个问题,网上一搜好多解决方案,而总结起来也就那几种,我逐一尝试这些方案,最后发现在我的项目中都不起作用,后来发现自己做的网页是通过file方式访问的,将网页代码放到apache下通过http协议访问,在iframe加载的时候调用如下js方法: 复制代码 代码如下: <SPANstyle="FONT-FAMILY:KaiTi_GB2312;FONT-SIZE:18px">functionSetWinHeight(obj) { varwin=o

  • iframe高度自适应及隐藏滚动条的实例详解

    iframe高度自适应及隐藏滚动条的实例详解 在工作中,我们可能会遇到自己公司和其他的公司达成合作关系,从而共同开发某个项目.而这时候,我们可能就需要在自己的网站上嵌入别人做好的页面.而这种情况下,我们一般都会选择去使用iframe达到我们的目的.但是iframe用起来,真的是让人头痛,高度无法控制,难看的滚动条等等,下面我分享一下自己在处理iframe时的一些心得. 高度自适应 <iframe src="http://huichang.qunar.com/huiQunar" i

  • javascript 中iframe高度自适应（同域）实例详解

    javascript 中iframe高度自适应(同域) 今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElementById("frame"); //frame是iframe的id if (document.getElementById) { if (iframeid && !window.opera) { if (iframei

  • 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

  • 如何设置iframe高度自适应在跨域情况下的可用方法

    在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法.在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面,这样当父页面被访问的时候,子页面可以被自动加载.iframe的高度需要根据子页面的实际高度来进行调整.如果iframe的高度小于子页面的实际高度,超出的部分无法显示:相反,如果iframe的高度过高,则页面上会出现大量的空白区域.我们可以通过属性或者CSS来设置iframe的高度,当不确定子页面内容的高度时,也可以通过脚本来进行动态指定.但是如果

  • Vue动态设置图片时src不生效的原因及解决方法

    Vue动态设置图片时src不生效的原因及解决方法

    目录 原因分析 解决方法 import和require的区别 原因分析 在vue项目中动态设置img的src时,图片会加载失败.我们可以先看个例子. <template> <div> <h1>动态设置图片</h1> <div> <h5>图片一</h5> <img :src=" logoFlag === 'vue' ? '../assets/vue-logo.png' : '../assets/react-l

  • vue仿携程轮播图效果(滑动轮播,下方高度自适应)

    vue仿携程轮播图效果(滑动轮播,下方高度自适应)

    先看案例,使用vue+swiper实现,slide不同高度时,动态计算盒子高度,让其下方高度自适应的效果 首先搭建vue项目,这里不做过多说明,然后安装swiper npm install swiper --save-dev 1. js部分:初始化swiper组件,vue要在mounted生命周期中进行初始化,代码如下: import Swiper from 'swiper' import { TweenMax, Power2 } from 'gsap' 初始化时调用resize函数,计算屏幕容

  • 解决html-jquery/js引用外部图片时遇到看不了或出现403的问题

    解决方法如下所示: <script type="text/javascript"> function showImg(url) { var frameid = 'frameimg' + Math.random(); window.img = '<img id="img" style="width: 100%;height: auto" src=\'' + url + '?' + Math.random() + '\' />

随机推荐