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 相关文章推荐
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
微信小程序入门之指南针
Oct 22 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
E路文章系统PHP
2006/12/11 PHP
火车头采集器3.0采集图文教程
2007/03/17 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
Python之自动获取公网IP的实例讲解
2017/10/01 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
Numpy数组的广播机制的实现
2020/11/03 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
台湾专柜女包:KINAZ
2019/12/26 全球购物
函授毕业生自我鉴定
2013/11/06 职场文书
优秀学生评语大全
2014/04/25 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
法定代表人资格证明书
2014/09/11 职场文书
圣诞节开幕词
2015/01/29 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL