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----文件操作
Jan 18 Javascript
jquery 插件开发备注
Aug 27 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 Javascript
JS代码编译器Monaco使用方法
Jun 11 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
玩转虚拟域名◎+ .
2006/10/09 PHP
php cookis创建实现代码
2009/03/16 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
简单JS代码压缩器
2006/10/12 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
pyv8学习python和javascript变量进行交互
2013/12/04 Python
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Python中subprocess的简单使用示例
2015/07/28 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
使用python实现名片管理系统
2020/06/18 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
C语言如何决定使用那种整数类型
2016/11/26 面试题
班主任经验交流会主持词
2014/04/01 职场文书
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS