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
投稿

猜你喜欢

  • vscode调试django项目的方法

    2022-03-07 01:02:51
  • PyTorch基础之torch.nn.CrossEntropyLoss交叉熵损失

    2022-01-12 19:39:19
  • Tensorflow实现多GPU并行方式

    2021-03-26 19:43:31
  • python模拟鼠标点击和键盘输入的操作

    2023-01-14 18:29:00
  • Python可视化神器pyecharts绘制柱状图

    2021-07-26 23:05:57
  • Python自动化部署工具Fabric的简单上手指南

    2022-11-23 03:23:25
  • asp动态页面生成html页面

    2008-10-24 09:03:00
  • 详解用Python处理HTML转义字符的5种方式

    2021-01-27 20:53:17
  • 最新idea2021注册码永久激活(激活到2100年)

    2023-06-21 01:42:42
  • 老生常谈js中0到底是 true 还是 false

    2024-05-11 09:44:12
  • vue实现拖拽交换位置

    2024-04-30 08:45:51
  • python执行get提交的方法

    2022-08-09 01:53:12
  • 带你一文读懂Python垃圾回收机制

    2022-03-03 11:58:03
  • Python基于codecs模块实现文件读写案例解析

    2023-08-31 16:25:21
  • Python运算符的应用超全面详细教程

    2023-08-20 18:24:56
  • anaconda安装后打不开解决方式(亲测有效)

    2023-01-21 09:40:15
  • asp 多关键词搜索的简单实现方法

    2011-04-11 10:45:00
  • Linux服务器网卡流量查看方法 shell和Python各一枚

    2023-10-07 09:31:19
  • Python爬虫进阶之Beautiful Soup库详解

    2022-09-13 04:38:50
  • python3 爬取图片的实例代码

    2021-08-22 13:37:57
  • asp之家 网络编程 m.aspxhome.com