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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
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使用百度天气接口示例
2014/04/22 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
javascript void(0)的妙用
2009/10/21 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
常用的javascript设计模式
2017/01/11 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
Python中的yield浅析
2014/06/16 Python
python登陆asp网站页面的实现代码
2015/01/14 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
使用python3实现操作串口详解
2019/01/01 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
业务主管岗位职责范本
2013/12/25 职场文书
化工专业求职信
2014/07/01 职场文书
村安全生产责任书
2014/08/25 职场文书
防灾减灾标语
2014/10/07 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书