js操作iframe父子窗体示例


Posted in Javascript onMay 22, 2014

父窗体获取iframe

window.iframeId

iframe获取父窗口

window.parent

parent.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<script type="text/javascript"> 
function btnFn(){ 
window.subWin.test(); 
} 
function get(name){ 
return document.getElementById(name); 
} 
</script> 
</head> 
<body> 
<input id="name" type="text" value="222"> 
<input type="button" id="btn" value="点击" onclick="btnFn();"><br/> 
<br/><br/> 
<iframe src="sub.html" id="subWin" 
name="subWin" width="100%" marginwidth="0" height="100%" 
marginheight="0" scrolling="Yes" frameborder="0" valign="middle" 
resize="no" style="display: block;border:3px solid red;"></iframe> </body> 
</html>

sub.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<script type="text/javascript" > 
function test(){ 
alert(window.parent.get("name").value);//结果:222 
} </script> 
</head> 
<body> 
我是窗体的内容 
</body> 
</html>
Javascript 相关文章推荐
用JavaScript和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
vue.js的提示组件
Mar 02 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
JS实现根据当前文字选择返回被选中的文字
May 21 #Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 #Javascript
jQuery异步验证用户名是否存在示例代码
May 21 #Javascript
jQuery取id有.的值的方法
May 21 #Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 #Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 #Javascript
JS 弹出层 定位至屏幕居中示例
May 21 #Javascript
You might like
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
Python实现JSON反序列化类对象的示例
2018/01/31 Python
python判断设备是否联网的方法
2018/06/29 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
信访工作经验交流材料
2014/05/23 职场文书
主要领导对照检查材料
2014/08/26 职场文书
见习报告怎么写
2014/10/31 职场文书
初中学生操行评语
2014/12/26 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
埃及王子观后感
2015/06/16 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python