前端开发

 首页 > 前端开发 > jquery教程 > Iframe实现跨浏览器自适应高度解决方法_jquery_自学

Iframe实现跨浏览器自适应高度解决方法_jquery_自学

分享到:
【字体:
导读:
          这篇文章主要介绍了Iframe实现跨浏览器自适应高度解决方法,通过父层容器的应用来实现这一功能,非常实用的一个技巧,需要的朋友可以参考下...

本文以实例形式讲述了Iframe实现跨浏览器自适应高度解决方法,非常具有实用价值。分享给大家供大家参考之用。具体方法如下:

该方法使用了jQuery,因此需要在iframe的src页面里面引入jQuery。

父页面里面相对简单一点,主要包含以下代码:



在iframe的src页面里面代码如下:




注释:

这里面的

$(window.parent.document).find("#if1").height($("#content").height()); 

这句话最初是:

$(window.parent.document).find("#if1").height($(document).height());

可以实现自适应高度,但是不能实现缩放自适应。因为document的高度是展示内容出现过的最高高度,所以这里如果点击展开,iframe不会缩小,只会展示最高出现过的高度

所以这里要用一个父层容器,也就是最新的代码。这样就可以实现自适应了。

相信本文所述对大家的jQuery程序设计有一定的借鉴价值。

分享到:
jquery和css3实现的炫酷时尚的菜单导航_j...
今天为大家带来的是jquery和css3实现的不错的导航菜单。点击列表图表后,内容页面向内移动显示菜单项。当单击关闭菜单按钮时,菜单项隐藏,内容页恢复原位。看下图 源码下载 我们看下实现代码: html代码: WIFEO/CODE Post hoc impie perpetratum quod in aliis quoque iam timebatur, t...
js/jquery判断浏览器的方法小结_jquery_...
JS获取浏览器信息 浏览器代码名称:navigator.appCodeName 浏览器名称:navigator.appName 浏览器版本号:navigator.appVersion 对Java的支持:navigator.javaEnabled() MIME类型(数组):navigator.mimeTypes 系统平台:navigator.platform 插件(数组):navigator.plugins 用户代理:navigator.userAgent ...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……