Category Archives: Javascript

自适应高度的iframe

在开发项目中会遇见需要使用iframe的情况,,但iframe的自适应能力非常差,特别是用于侧边栏的时候,iframe的高度是固定的,不能随内容的多少而变换,这就会严重影响页面的美观,这里就介绍一种使用javascript方法来解决这个问题. 原理很简单,就是当页面载入的时候算出iframe所引用页面的高度,然后把得出的高度赋给iframe,这样就实现的iframe高度的自适应.下面我们看看代码: javascript的代码: <script language=”javascript”> window.onload = (function () {  var iObj = document.getElementById(‘demo’); iObj.height =  iObj.contentWindow.document.documentElement.scrollHeight; }); </script> Html代码: <iframe frameborder=”0″ src=”sidebar.html” class=”iframe_style”  id=”demo” name=”demo” scrolling=”no”></iframe>  弊端: 目前在实际运用中发现这种方法并不完美,存在一下几种弊端 效率问题,如果iframe引用的是结构复杂的动态页面,会导致页面加载时间很长,影响用户浏览(除IE6的浏览器可以用min-height来缓解这种现象) iframe高度相对固定,iframe的高度是通过加载页面是即时算出来的,也就是说在不刷新主页面的情况下,如果iframe引用页面内容改变(比如翻页,而且第二页的内容比第一页多),那么就会出现内容显示不完全的情况…

Posted in Javascript1 views | Tagged | 3 Comments

CSS属性与JavaScript 编码方法对照表[转]

    CSS与JS紧密配合,为我们的页面增添了很多别致的效果。在52CSS.com中也有相关的案例。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。比如:鼠标经过一个图片时我们让图片加一个边框,代码可能是这样:JavaScript中style后面的属性应该是什么? JavaScript CSS Style属性对照表 盒子标签和属性对照 CSS语法 (不区分大小写)   JavaScript语法 (区分大小写) border                               border border-bottom                    borderBottom border-bottom-color          borderBottomColor border-bottom-style           borderBottomStyle border-bottom-width          borderBottomWidth border-color                      borderColor border-left                         borderLeft border-left-color                borderLeftColor border-left-style                 borderLeftStyle border-left-width               borderLeftWidth border-right … Continue reading

Posted in Javascript1 views | Leave a comment
Pages: Prev 1 2 3 4