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判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 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 各种排序算法实现代码
2009/08/20 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
php目录操作实例代码
2014/02/21 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
最新个人职业生涯规划书
2014/01/22 职场文书
家长会邀请书
2014/01/25 职场文书
委托书范文
2014/04/02 职场文书
护士感人事迹
2014/05/01 职场文书
施工安全承诺书
2014/05/22 职场文书
旷课检讨书范文
2015/01/27 职场文书
汽车销售合同文本
2019/08/08 职场文书
python requests模块的使用示例
2021/04/07 Python