iframe框架用JavaScript子页面控制父页面

作者:zishu 来源:zishu博客 时间:2009-01-19 13:43:00 

parent.html  中的代码为:

<iframe marginwidth="0" framespacing="0" marginheight="0" frameborder="0" 
 name="uploadframe" id="uploadframe" src="c.html" scrolling="no" width="100" height="100" ></iframe>

如想在c.html 中写一些代码去改变parent.html 中的一些内容,以下代码可作为参考:

1、parent.window.frames 可返回parent.html 中所有的iframe;返回结果应该是一个数组,用parent.window.frames[iframeId]可得到iframeId;

2、用parent.document.getElementById('xxxx')可得到父里的xxxx,并改变相应的值,例如:parent.document.getElementById('xxxx').className = 'test'; 

3、如果我想在父中再创建一个元素,直接用parent.appendChild(yyyy)在firefox中是可以的,但在IE(最起码IE6)是不行的; 所以,要把创建这个动作放在父中来完成,在子中调用;

例如:父中的代码为:

function addIframe(vNum){
 var iframe = document.createElement("iframe");
 iframe.setAttribute("marginwidth", "0"); 
 iframe.setAttribute("framespacing", "0"); 
 iframe.setAttribute("marginheight", "0"); 
 iframe.setAttribute("frameborder", "0"); 
 iframe.setAttribute("name", vNum); 
 iframe.setAttribute("id", vNum); 
 iframe.setAttribute("src", "http://www.zishu.cn"); 
 iframe.setAttribute("scrolling", "no"); 
 iframe.setAttribute("width", "100"); 
 iframe.setAttribute("height", "100"); 
 document.getElementsByTagName('body')[0].appendChild(iframe);
 return;
}

子中可以这样调用:

<script>
parent.addIframe('xxxx');
</script>

这样就能完整创建一个元素了;

4、同理,如果我想在子中把iframe给隐藏,本来想直接用parent.document.getElementById('uploadframe').style.display = 'none';来弄,但无论是在IE还是FIREFOX中,都是行不通的;只能用上边的方法把动作放在父中。

标签:iframe,JavaScript,框架,父
0
投稿

猜你喜欢

  • sql server数据库最大Id冲突问题解决方法之一

    2012-01-05 19:28:42
  • 10个很实用的js小脚本代码

    2007-10-17 21:08:00
  • 关于长度单位pt、px、dpi的误解

    2008-06-01 13:30:00
  • 仿阿里巴巴搜索导航设计效果

    2008-04-15 15:01:00
  • 国际上十四个优秀网页设计审核站

    2007-09-30 20:18:00
  • 根据时段自动切换你的站点CSS皮肤风格

    2007-09-20 18:08:00
  • 不安全的js写法

    2009-09-16 14:26:00
  • 三达不溜:www

    2009-03-28 11:44:00
  • SQL建立数据库及删除数据库命令

    2011-12-01 10:23:21
  • 快速图片链接批处理

    2007-02-03 11:39:00
  • MS SQL7.0的数据迁移到MySQL上的一种方法

    2008-11-01 16:59:00
  • asp源码实现Access数据库的建立或压缩

    2007-08-06 16:54:00
  • 在网页设计中,如何使用图标来支持内容?[译]

    2009-03-16 16:35:00
  • zen coding的dreamweaver插件安装教程

    2010-01-12 13:30:00
  • ASP JSON类文件的使用方法

    2011-04-30 16:39:00
  • 教你快速了解公共MySQL的数据库服务器层

    2008-12-17 17:10:00
  • VMware中Linux共享mysql数据库

    2010-10-25 20:29:00
  • sql随机记录之如何解决每次RND的结果都一样的问题?

    2007-09-11 13:24:00
  • css特性:空白外边距互相叠加

    2010-06-21 10:53:00
  • 轻松掌握如何从命令行启动mysqld服务器

    2008-12-31 15:47:00
  • asp之家 网络编程 m.aspxhome.com