开发需求需要在 h5 中用 iframe 中调用一个其他公司开发的 html 页面. 简单的插入 <iframe /> 并设置宽高后,发现在 Android 手机浏览器上打开可以正常运行,但是在 iOS 手机上会有高度问题,iframe 会扩展超过设置的高度. 查找后发现问题是出在 iOS Safari 上,对于一个 scrollable 的 iframe 元素,iOS Safari 会选择扩展 iframe 的高度来自适应其中 web 页面内容的高度.所以当页面内容超过 iframe 设置的

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

网上查了好多用着都不行,自己搞定了:在包含iframe的页面中加入以下脚本,基本思想是在iframe加载内容后重新设置高度,下面代码尽在IE6中用过,没在其他浏览器中测试. 代码如下: <script type="text/javascript"> <!-- $( function() { //iframe高度随内容自动调整 $('.main').load( function() { $(this).height($(this).contents().find(&qu

前两天在网上看到了一道面试题,问iframe高度自适应的问题.发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下. 原题目是: 页面A的域名是:http://www.taobao.com,页面B的域名是http://www.tmall.com,如果A使用iframe引用页面B,如何做到iframe的高度自适应(即B内容有多高,iframe就有多高) 在这里首先分析一下如果不涉及跨域或者只是主域相同,子域不同的情况下的解决方案: 父页面代码: <!DOCTYPE html> <

//设置iframe高度 function setHeight(){ var originalHeight=$(window).height(); var headerHeight=$('.header').height(); $('#iframe1').height(originalHeight-headerHeight) } 之前在处理后台项目时使用了iframe,处理的过程中出现了双滚动条. 使用上面的方法处理,可以解决.

JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求.当内容是未知或者是变化的时候.这个时候又有几种情况了. iframe内容未知,高度可预测 这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用javascript改变高度.常用的兼容代码有: // document.domain = "caib

Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多人都头疼万分.百度或是谷歌一下,确实很多解决方法,但尝试一下,会发现问题很多:浏览器兼容性差,不能自适应,仅支持同域Iframe等诸多问题,尤其是跨域Iframe高度自适应问题.网上根本找不到一种可行的方案(唯一有一种提到加入代理页面的,经过测试发现无用).难道真的没有一种可行的解决方案了吗? No

iframe 高度自适应一般是指: iframe 本身的高度 =  内容高度. 这样做可以使最外层不出现滚动条. 如果网页内容使用了Ajax方式填充内容的话. 由于内容是动态的. 以上方式应该变为: iframe本身的高度=内容高度,在 内容加载后,再重新设置Iframe高度.

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

http://www.cnblogs.com/snandy/p/3900016.html 跨子域的iframe高度自适应 完全跨域的iframe高度自适应 同域的我们可以轻松的做到 1. 父页面通过iframe的contentDocument或document属性访问到文档对象,进而可以取得页面的高度,通过此高度值赋值给iframe tag. 2. 子页面可以通过parent访问到父页面里引入的iframe tag,进而设置其高度. 但跨域的情况则不允许对子页面或父页面的文档进行访问(返回und

$(document).ready(function () { $("#test").load(function () { var thisheight = $(this).contents().find("body").height() +10; $( ? : thisheight); }); }); 很多管理系统中,都使用iframe进行信息内容的展示方式,或者作为主菜单的链接展示内容. 使用iframe的问题就是自适应高度的问题. iframe自适应高度本身是

HTML: <iframe id="yb_if" width="940px" src="连接" frameborder=0 allowfullscreen></iframe> JS: //自动同步iframe高度 function reinitIframe(){ var iframe = document.getElementById("yb_if"); try{ iframe.height = ifr

网上关于iframe高度自适应的代码有很多,但比较杂乱,本文根据实用性整理了以下代码: JavaScript部分: 折叠JavaScript Code复制内容到剪贴板 <script type="text/javascript"> function SetCwinHeight(iframeObj){ if (document.getElementById){ if (iframeObj){ if (iframeObj.contentDocument && i

在做RSS订阅的时候遇到这样一个问题:点击文章标题时,弹出文章的详细界面.本来打算直接用弹出div层来显示文章的内容,但是设置div的overflow:scroll滚动条不好看,还有就是在android.ios4及以下,会失效(这个可以使用iscroll.js来解决,).最后改为iframe来显示文章内容.这里涉及到子页面和父页面的通信问题,不清楚可以看js之iframe子页面与父页面通信. 我在子页面获取到父页面传递过来的文章内容时,使用innerHTML将内容放入div中.代码如下: <di

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策略,跨域情况下,被嵌套页面如果想要获取和修改父页面的DOM属性会出现权限不足的情况,提示错误:Permission denied to access property 'document'.这是因为除了包含脚本的文档载入的主机外,同源策略禁止客户端脚本链接到其他任何主机或者访问其他任何主机的数据.这

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策略,跨域情况下,被嵌套页面如果想要获取和修改父页面的DOM属性会出现权限不足的情况,提示错 误:Permission denied to access property 'document'.这是因为除了包含脚本的文档载入的主机外,同源策略禁止客户端脚本链接到其他任何主机或者访问其他任何主机的数据.

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

谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个ifame高度自适应网上一搜一大把,今天要讲的如何在不同的网站下进行相互的调用跟在同一个网站下是一个效果:例如我在自己的项目里面Iframe  了第一博客的页面  http://www.diyibk.com/   当第一博客的页面高度变化了怎么通知父页面呢? 这个时候在谷歌下肯定是拿不到 ifram

Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自动适应,这一点让很多人都头疼万分.百度或是谷歌一下,确实很多解决方法,但尝试一下,会发现问题很多:浏览器兼容性差,不能自适应,仅支持同域Iframe等诸多问题,尤其是跨域Iframe高度自适应问题.网上根本找不到一种可行的方案(唯一有一种提到加入代理页面的,经过测试发现无用).难道真的没有一种可行的解决方案了

在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固定而显示出来的滚动条,不仅影响美观,还会对用户操作带来不便.于是自动调整iframe的高度就成为本文的重点. 采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 同域时Iframe高度自适

iframe高度自适应使用场景是类似于微博,新闻等点击加载更多这种功能实现,要求iframe的高度能够跟随内容的变化而变化. 父html文件,也就是引用ifram的文件 src="blog/blog.display.html" 引用的文件 id="blog-display" 全局唯一ID scrolling="no" 去除滚动条 <iframe src="blog/blog.display.html" id="