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延时重复执行函数 lLoopRun.js
Jun 29 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
DOM 事件流详解
Jan 20 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
React如何实现浏览器打印部分内容详析
May 19 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
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
Javascript之文件操作
2007/03/07 Javascript
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
实现vuex原理的示例
2020/10/21 Javascript
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
Python 转换文本编码实现解析
2019/08/27 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
python时间time模块处理大全
2020/10/25 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
三星美国官网:Samsung美国
2017/02/06 全球购物
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
网络技术支持面试题
2013/04/22 面试题
AURALog面试题软件测试方面
2013/10/22 面试题
劳动之星获奖感言
2014/02/01 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
秋天的雨教学反思
2014/04/27 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript