iframe 父窗口和子窗口相互的调用方法集锦


Posted in Javascript onDecember 15, 2010

一、父窗口调用iframe子窗口方法
1、HTML语法:<iframe name="myFrame" src="child.html"></iframe>
2、父窗口调用子窗口:myFrame.window.functionName();
3、子窗品调用父窗口:parent.functionName();
简单地说,也就是在子窗口中调用的变量或函数前加个parent.就行
4、父窗口页面源码:

<html> 
<head> 
<script type="text/javascript"> 
function say() { 
alert("parent.html------>I'm at parent.html"); 
} 
function callChild() 
{ 
//document.frames("myFrame").f1(); 
myFrame.window.say(); 
} 
</script> 
</head> 
<body> 
<input type=button value="调用child.html中的函数say()" onclick="callChild()"> 
<iframe name="myFrame" src="child.html"></iframe> 
</body> 
</html>

5、子窗口页面:
<html> 
<head> 
<script type="text/javascript"> 
function say() 
{ 
alert("child.html--->I'm at child.html"); 
} 
function callParent() { 
parent.say(); 
} 
</script> 
</head> 
<body> 
<input type=button value="调用parent.html中的say()函数" onclick="callParent()"> 
</body> 
</html>

二、iframe 父窗口和子窗口相互的调用方法
1、IE中使用方法:
父窗口调用子窗口:iframe_ID.iframe_document_object.object_attribute = attribute_value
例子:onClick="iframe_text.myH1.innerText='http://www.pint.com';"
子窗口调用父窗口:parent.parent_document_object.object_attribute = attribute_value
例子:onclick="parent.myH1.innerText='http://www.pint.com';"
2、Firefox中使用方法:
上面在IE下没有问题,但在firefox下不正常。在firefox下,应该是如下调用方法:
父窗口调用子窗口:window.frames["iframe_ID"].document.getElementById("iframe_document_object"­).object_attribute = attribute_value
例: window.frames["iframe_text"].document.getElementById("myH1").innerHTML= "http://hi.3water.com";
子窗口调用父窗口:parent.document.getElementById("parent_document_object").object_attribute = attribute_value
例: parent.document.getElementById("myH1").innerHTML = "http://3water.com";
3、完整的例子
test.htm
<HTML> 
<HEAD> 
<TITLE> Test Page </TITLE> 
<script src="prototype-1.4.0.js"></script> 
<script language="javascript"> 
function show() 
{ 
window.frames["iframe_text"].document.getElementById("myH1").innerHTML = "http://hi.3water.com"; 
} 
</script> 
</HEAD> 
<BODY> 
<iframe height="350" width="600" src="iframe_test.htm" name="iframe_text"></iframe> 
<form action="" method="post"> 
<input name="haha" id="haha" type="text" maxlength="30" value="haha" /> 
<br /> 
<textarea cols="50" rows="5" id="getAttributeMethod"></textarea> 
<input type="button" onClick="show();" value="提交"/> 
</form> 
<h1 id="myH1">d</h1> 
</BODY> 
</HTML>

frame_test.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
</head> 
<script language="javascript"> 
function show() 
{ 
parent.document.getElementById("myH1").innerHTML = http://3water.com; 
} 
</script> 
<body> 
<h1 id="myH1">ha</h1> 
<form action="" method="post"> 
<input name="abc" id="abc" type="text" maxlength="30" value="abc" /> 
<br /> 
<textarea cols="50" rows="10" id="text"></textarea> 
<br /> 
<input type="button" value="提交" onclick="show();"/> 
</form> 
</body> 
</html>

test.htm里面firefox下访问iframe 必须用name,不能用id,所以要改为name="iframe_test" 。(http://chenling1018.blog.163.com/blog/static/1480254200811891041694/)
三、在c#中如何动态改变iframe的src值,动态指向一个网页
1)如果是javascript脚本
给iframe加一个ID如<iframe id=frmList……
在脚本写
frmList.document.location=strNewUrl
2)如果是后台程序
给iframe加一个ID,再加上runat=server 如<iframe id=frmList runat=server ……
在程序里写
frmList.Attributes.Add("src",strNewUrl);
Javascript 相关文章推荐
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
jQuery Ajax使用 全解析
Dec 15 #Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 #Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 #Javascript
javascript中的关于类型转换的性能优化
Dec 14 #Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 #Javascript
根据一段代码浅谈Javascript闭包
Dec 14 #Javascript
js保存当前路径(cookies记录)
Dec 14 #Javascript
You might like
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
php二维码生成以及下载实现
2017/09/28 PHP
关于js注册事件的常用方法
2013/04/03 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
python 排序算法总结及实例详解
2016/09/28 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
工程管理专业毕业生自荐信
2014/01/24 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
关于教师节的广播稿
2015/08/19 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python