javascript之iframe

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>

javascript之iframe相关推荐

[JavaScript]JavaScript处理iframe的动作
随着W3C一声令下,几年前使用非常频繁的frameset + frame已完成使命,光荣退伍.作为frameset的替代方案(姑且这么称吧),iframe的使用也多了起来.较frameset方案,if ...
JavaScript操作iframe之不得不说的秘密（一）
随着W3C一声令下,几年前使用非常频繁的frameset + frame已完成使命,光荣退伍.作为frameset的替代方案(姑且这么称吧),iframe的使用也多了起来.较frameset方案,if ...
PHP网站使用JavaScript和Iframe简单实现部分刷新效果
本文主要是记录自己寒假作业PHP网站实现加载界面的文章,运行效果如下图所示.主要记录php+html+Apache开发网站的3个功能:(方便以后阅读和其他人学习) 1.如何实现简单页面 ...
ajax将响应结果显示到iframe,JavaScript：iframe / Ajax / JSON
iframe 在Ajax流行之前大量使用: iframe中的src属性指定的就是一个独立的页面url地址,iframe中呈现的就是这个页面的内容. 通过改变src的值,我们就可以轻松的改变iframe ...
JavaScript将iframe中控件的值传到主页面控件中
主要是通过在主页面定义一个传输数据的函数GetData(data),然后在iframe嵌入页面中通过parent.GetData(data),这样即可在GetData实现将data进行处理即可. 现在 ...
javascript 父子iframe相互传参数
前端开发的过程中.可能用iframe去嵌套html页面. 当我们在父iframe中传递参数去给子iframe的时候. 我们可以通过将参数对象设置成子类iframe的window对象的成员变量. < ...
JavaScript获取iframe中form表单中元素的值
index.html内容: 1 2 <iframe id="mpage" name="mpage" onload="AdaptorHeight( ...
页面状态javascript 判断 iframe是否加载成功
这段时间一直在学习页面状态之类的问题,现在正好有机会和大家分享一下. 最近在做产品的维护,修改一些老的bug.有个bug是jsp页面在加载的时候请求一个iframe.在页面显示的过程当中,窗口会长久的 ...
javascript利用iframe打印pdf文档失败的问题
pdf文档不能在QQ浏览器(或者谷歌浏览器)直接打开利用iframe打印pdf文档可能遇到的问题利用$("#"+iframe的id)[0].contentWindow.prin ...

javascript之iframe

`iframe`基本知识

操作`iframe`

javascript之iframe相关推荐

最新文章

热门文章

javascript之iframe

iframe基本知识

操作iframe

javascript之iframe相关推荐

最新文章

热门文章

`iframe`基本知识

操作`iframe`