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. ROC曲线是通过样本点分类概率画出的 例如某一个sample预测为1概率为0.6 预测为0概率0.4这样画出来，此外如果曲线不是特别平滑的话,那么很可能存在过拟合的情况

    ROC和AUC介绍以及如何计算AUC from:http://alexkong.net/2013/06/introduction-to-auc-and-roc/ ROC(Receiver Operat ...

  2. linux下安装Java se和Eclipse

    首先要去下载好JDK,Java SE 8的官方网址是http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213 ...

  3. 总结js创建object的方式（对象）

    1.使用new操作符后跟Object构造函数 如: var person = new Object(); 可以写成 var person = {}; person.name = "kitty ...

  4. OpenCV教程【002 VideoCapture加载并播放视频】

    #include <opencv2/opencv.hpp> #include <iostream> using namespace std; using namespace c ...

  5. fakeroot: preload library `libfakeroot.so' not found, aborting.

    /**************************************************************************** * fakeroot: preload li ...

  6. AtCoder Petrozavodsk Contest 001 B - Two Arrays

    Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem Statement You are given two inte ...

  7. angular input=file ng-change事件

    首先 ng-change事件要与ng-model绑定  但是 当input 的  type=file时   ngchange事件是失效的  我们可以用图中的onchange事件去代替 其次 如果想在这 ...

  8. git revert reset

    git revert是用一次新的commit来回滚之前的commit,git reset是直接删除指定的commit. git reset 是把HEAD向后移动了一下,而git revert是HEAD ...

  9. git ssh登录

    .ssh下创建config文件 其内容: Host ipIdentityFile ~/.ssh/私钥文件名Port 22User git服务器的账号,不是git账号名(私钥文件名才是git账号名) 注 ...

  10. C# Chat曲线图,在发布之后出现错误 Invalid temp directory in chart handler configuration c:\TempImageFiles\

    First error message: Invalid temp directory in chart handler configuration c:\TempImageFiles\ Soluti ...