html

6 8

iframe自适应高度(适合IE firefox opera)

做有些网页的时候用frameset会很方便,但是frameset很影响速度,而且还很不美观,并且seo也不好.所以用iframe还是比较好的选择.
后来看到QQ空间个人中心也用的iframe,很漂亮.很好用.于是也试着用iframe.但是自适应高度很是个问题.不同的游戏器都会不一样,说到这儿我要再深深的BS一下IE..
做了很多尝试,在网上看了很久,做了下小小的总结.希望对大家有帮助

怎么获取网页的高度

对于IE(我用的IE8,IE6就不知道行不行了)

document.getElementById(“myframe”).Document.body.scrollHeight;

对于其他浏览器(firefox  opera)

document.getElementById(“myframe”).contentDocument.body.scrollHeight;

共用方法(IE8  firefox  opera)

document.getElementById(“myframe”).contentWindow.document.body.scrollHeight;

 

代码

  1: <html>
  2: <head>
  3: <title>iframe自适应高度</title>
  4: <script type="text/javascript">
  5: function change(){
  6: var o=document.getElementById("myframe");
  7: var height= o.contentWindow.document.body.scrollHeight;
  8: o.height=height;
  9: }
 10: 
 11: function show(){
 12: var o=document.getElementById("myframe");
 13: alert(o.contentWindow.document.body.scrollHeight);
 14: }
 15: </script>
 16: </head>
 17: <body onresize="change()">
 18: <div>
 19: <button onclick="document.getElementById('myframe').src='article.html'">日志</button>
 20: <button onclick="document.getElementById('myframe').src='pic.html'">图片</button>
 21: <button onclick="show()">显示高度</button>
 22: </div>
 23: <iframe frameBorder="1" scrolling="no" id="myframe" width="50%" src="article.html" onload="change()"></iframe>
 24: </body>
 25: </html>

 

注:

我用的浏览器版本

IE8   firefox3.5   opera10.05

5 1

html中的label标签的秒用

今天发才现了html中的label标签的一个有用的属性for。

for属性是与其他元素的id属性相对应的,必须和另外一个元素的id值一样,只有这样才能发挥作用。

看以下代码

  1: <form>
  2:   <label for="male">Male</label>
  3:   <input type="radio" name="sex" id="male" />
  4:   <br />
  5:   <label for="female">Female</label>
  6:   <input type="radio" name="sex" id="female" />
  7: </form>

一般情况下,我们都会直接把male和female写出来,而不会再用个falbe标签。

但是假如用了label标签,并指定了for属性。这样做的好处是。

当你点击label for=”male”时和点击 imput type=”radio” id=”male”效果是一样的。

也就是说这个label标签和与他id一样的元素绑定了,他们的事件一样

所以这个label就是(for)为了另一个元素的