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 DOM 添加事件
Feb 14 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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 缩略图实现函数代码
2011/06/23 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
python如何保存文本文件
2020/06/07 Python
Python识别验证码的实现示例
2020/09/30 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
某公司的.net工程师面试题笔试题
2013/11/22 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
《雷雨》教学反思
2014/02/20 职场文书
犯错检讨书
2014/02/21 职场文书
施工员岗位职责
2014/03/16 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
单位综合评价意见
2015/06/05 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书