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的单例模式 (singleton in Javascript)
Jun 11 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
bootstrap table表格插件使用详解
May 08 Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 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 缓冲的免费实现方法
2006/10/09 PHP
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
Angular 数据请求的实现方法
2018/05/07 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python标准库与第三方库详解
2014/07/22 Python
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
Python中用于计算对数的log()方法
2015/05/15 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
django框架使用方法详解
2019/07/18 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
女方婚礼新郎答谢词
2014/01/11 职场文书
员工薪酬福利制度
2014/01/17 职场文书
气象学专业个人求职信
2014/04/22 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
党校毕业个人总结
2015/02/28 职场文书
公司的力量观后感
2015/06/05 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python