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 相关文章推荐
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
google 搜索框添加关键字实现代码
Apr 24 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
js常见遍历操作小结
Jun 06 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 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
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
使用python实现扫描端口示例
2014/03/29 Python
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
超简单的Python HTTP服务
2019/07/22 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
django model通过字典更新数据实例
2020/04/01 Python
python opencv实现图像配准与比较
2021/02/09 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
综合素质的自我鉴定
2013/10/07 职场文书
园林资料员岗位职责
2013/12/30 职场文书
高中军训广播稿
2014/01/14 职场文书
财政专业求职信范文
2014/02/19 职场文书
高校教师自荐信范文
2014/03/13 职场文书
小班评语大全
2014/05/04 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
工资证明范本
2015/06/12 职场文书
2016年国培研修日志
2015/11/13 职场文书