iframe自适应高度

(2013-04-23 17:29:49)

标签:

iframe

高度

自适应

js

杂谈

分类: 网页制作
有时候我们的网站需要引入其他网站的东西,比如评论,这时候就需要使用iframe,那么在不知道其高度的情况下如何使其能够自适应呢?下面用js代码实现。
<iframe id="iFrame1"  width="100%" src="链接地址" frameborder="0"  scrolling="no" onload="document.getElementByIdx_x_x('iFrame1').style.height = document.body.clientHeight+'px'; "></iframe>
最重要的就是这句:onload="document.getElementByIdx_x_x('iFrame1').style.height = document.body.clientHeight+'px';也可以直接用this.style.height=
不知道新浪博客总是在某些单词后面添加一些无用的(getElementByIdx_x应该去掉x_x),截图如下:

这样在不设置高度的情况下iframe也能够根据自身内容自适应了。

iframe自适应高度(转)的更多相关文章

  1. jquery 清空 iframe 的内容,,iframe自适应高度

    $(iframe).contents().find("body").html(""); iframe自适应高度 $("#AllDescription& ...

  2. 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变

    今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...

  3. jquery iframe自适应高度[转]

      经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试. 很古老的方法: <iframe src="../In ...

  4. js实现iframe自适应高度

    转自:http://www.jb51.net/article/15780.htm 对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的! 不带边框的iframe因为能 ...

  5. 网页制作技巧:iframe自适应高度

    转自:http://www.enet.com.cn/article/2012/0620/A20120620126237.shtml 通过Google搜索iframe 自适应高度,结果5W多条,搜索if ...

  6. Iframe 自适应高度的方法!

    第一种方法:代码简单,兼容性还可以,大家可以先测试下. function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...

  7. iframe自适应高度的多种方法小结

    转自:http://www.jb51.net/article/15780.htm 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小 ...

  8. iframe自适应高度的多种方法方法小结

    对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的  不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 ifram ...

  9. [转载]再谈iframe自适应高度

    Demo页面:主页面 iframe_a.html ,被包含页面 iframe_b.htm 和 iframe_c.html 下面开始讲: 通过Google搜索iframe 自适应高度,结果5W多条,搜索 ...

  10. iframe自适应高度的多种方法方法小结(转)

    对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的 ...

随机推荐

  1. nodeJs爬虫小程序练习

    //爬虫小程序 var express = require('express'); //superagent是一个http的库,可以发起get和post请求 var superagent = requ ...

  2. Java中常见的比较器的实现方法

    在Java中经常会涉及到对象数组的排序问题,那么就涉及到对象之间的比较问题. 通常对象之间的比较可以从两个方面去看: 第一个方面:对象的地址是否一样,也就是是否引用自同一个对象.这种方式可以直接使用& ...

  3. 时间服务器: NTP 服务器及客户端搭建

    时间服务器: NTP 服务器及客户端搭建 一. NTP 服务器的安装与设定 1. NTP 服务器的安装与设定前言 2. 所需软件与软件结构 3. 主要配置文件 ntp.conf 的处理 4. NTP ...

  4. ASP.NET MVC中加入Web Forms

    目的 有时候在一个ASP.NET MVC项目发布之后,又需要添加动态页面,同时又不想重新在源代码中添加view,那么这时候就要用上Web Forms了. 步骤 1.在项目根目录添加一个文件夹,在文件夹 ...

  5. LKDBHelper Sqlite操作数据库

    首先这里要说明一下,为什么用FMDB而不用Core Data呢,因为我们不知道Core Data是如何映射对象里面的属性关系的,如果我们更改了属性的话,就会报错 首先是创建LKDBHelper对象 L ...

  6. PHP文件管理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. MyISAM引擎的特点及优化方法

    1.什么是MyISAM引擎?MyISAM引擎是MySQL关系数据库管理系统的默认存储引擎(MySQL5.5.5以前),这种MySQL的表存储结构从旧的ISAM代码扩展出许多有用的功能.在存储的时候,每 ...

  8. IntelliJ IDEA 代码检查规范QAPlug

    转自:http://blog.csdn.net/jizi7618937/article/details/51500725 Avoid Array Loops 数组之间的拷贝使用System.array ...

  9. plsql Developer----plsql软件总结(待续更新)

    如何查看数据库所有的表 打开pl/sql Developer连接上数据库了以后,在菜单 Tools 下面有个 Object browser 将其打勾(如果已经打勾了就不用管了),之后在IDE的左边有个 ...

  10. spark gateway引发:跟踪Cloudera安装服务异常日志跟踪

    spark gateway是用于接收cloudera管理的应用:可以上报数据,不影响正常使用.启动gateway失败,我觉得可能是因为配置问题? 这个问题可能比较深,因为我通过查看日志(clouder ...