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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
vue prop传值类型检验方式
Jul 30 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高级OOP技术演示
2009/08/27 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
微信小程序实现红包雨功能
2018/07/11 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
[17:36]VG战队纪录片
2014/08/21 DOTA
python转换摩斯密码示例
2014/02/16 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
ECHT官方网站:男女健身服
2020/02/14 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
计算机应用毕业生自荐信
2013/10/23 职场文书
小学生考试获奖感言
2014/01/30 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
投诉信范文
2015/07/02 职场文书
开学典礼校长致辞
2015/07/29 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技