javascript之iframe

news/2024/9/17 18:05:21

iframe可以做的事情：

实现跨域
解决IE6下select遮挡不住的问题
解决ajax的前进后退问题
实现异步上传

`iframe`基本知识

iframe元素会创建包含另外一个文档的内联框架

操作`iframe`

1）隐藏iframe表框
设置frameborder为0；

<iframe frameborder="0" width="400" height="400" src="#" scrolling="no">
</iframe>

<body><iframe frameborder="1" width="400" height="400" src="#" scrolling="no" id="myiframe"></iframe><script>var myiframe = document.getElementById("myiframe");myiframe.style.border = "none"; // FF下有效，IE下无效myiframe.setAttribute("frameborder",0);//FF下有效，IE下无效myiframe.frameBorder = 0;//FF下有效，IE下无效</script>
</body>

2)动态创建iframe

<script>var obj = document.createElement("iframe");obj.frameborder = 0;obj.src ="http://blog.csdn.net/cuew1987";  obj.frameBorder = 0;//FF、IE隐藏边框有效  obj.width = "400px";  obj.height = "400px";  obj.scrolling = "no";  document.body.appendChild(obj); 
</script>

3)获取iframe

<script>var obj = document.getElementById("myiframe");  //可操作iframe有关的属性，不能操作里面的文档var obj = frames["myiframe"];
</script>

获取iframe中的window对象

<script>function getIframeWindow(obj){return obj.contentWindow || obj.contentDocument.parentWindow;}
</script>

如果是获取document对象，则

return obj.contentWindow.document || obj.contentDocument;

a>contentWindow 兼容各个浏览器，可取得子窗口的 window 对象。
b>contentDocument Firefox 支持，> ie8 的ie支持。可取得子窗口的 document 对象。

4)获取iframe页面高度

function getIframeHeight(obj){  var idoc = getIframeWindow(obj).document;   if(idoc.body){  //W3Creturn Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);     }else if(idoc.documentElement){  //IEreturn Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);     }  
}

5)父子页面互访

子访问父：  parent.html:  <body>  <div>等到的信息：<div id="msg"></div></div>  <iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>  </body>  son.html:  <body>  <input type="button" onClick="setMsg()" value="setMsg">  <script>  function setMsg(){  var msg = window.parent.document.getElementById("msg");  msg.innerHTML= "Hello world!!";  }  </script>  </body>

父访问子：
parent.html:
<body><div>等到的信息：<div id="setMsg"></div></div>  <input type="button" value="setMsg" onClick="setMsg()"><br>  <iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>  <script type="text/javascript">  function setMsg(){  var obj = document.getElementById("myiframe");  var msg = getIframeWindow(obj).document.getElementById("msg");  document.getElementById("setMsg").innerHTML = msg.innerHTML;  }  </script>  
</body>  son.html:  
<body>  <div id="msg">Hello world!!!</div>  
</body>