iframe

8 25

使用jquery获取iframe加载完成事件

本文概要：网页中的iframe加载完成后，希望做一些工作。比如在iframe内容改变前在某处显示”正在加载”，在加载完成后，显示内容改为”加载完成”。那么该怎么处理呢？

在jquery中iframe加载完成事件为load，而不是ready

[code=html]





$(function(){
$(“#phone”).change(function(){
$(“#message”)

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