js将iframe中控件的值传到主页面控件中的实现方法


Posted in Javascript onMarch 11, 2013

现在来看一下代码的实现,首先来看一个主界面的代码

<html> 
    <head> 
        <script type="text/javascript"> 
            function GetData(data) 
            { 
                alert(data); 
                document.getElementById("id1").value=data; 
            } 
        </script> 
    </head> 
<body> 
    <div> 
        <input id="id1" type="text" value="11" /> 
    </div> 
    <div> 
        <iframe id="frameid" src="b.html"> 
        </iframe> 
    </div> 
</body> 
</html>

可以看到在主页面定义一个JavaScript函数实现,将传入的data参数,赋值给id为id1的input 文本控件。

下面来看一个嵌入的b.html页面代码

<script type="text/javascript"> 
    function OnTest() 
    { 
        var data=document.getElementById("test").value; 
        parent.GetData(data); 
    } 
</script> 
<div> 
    <input id="test" type="text" value="将此值传到主页面控件中" /> 
    <button onclick="OnTest()">test</button> 
</div>

嵌入页面中主要通过一个按钮事件,将此页面中一个input文本控件中的值取出,然后通过parent.GetData(data)调用主页面的函数进行操作即可。
js将iframe中控件的值传到主页面控件中的实现方法

这是未点击按钮前的效果,现在点击按钮查看效果。

js将iframe中控件的值传到主页面控件中的实现方法

这样就实现了传值的效果

Javascript 相关文章推荐
js实时监听文本框状态的方法
Apr 26 Javascript
javascript动画浅析
Aug 30 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
js比较和逻辑运算符的介绍
Mar 10 #Javascript
caller和callee的区别介绍及演示结果
Mar 10 #Javascript
JavaScript表达式:URL 协议介绍
Mar 10 #Javascript
javascript中的void运算符语法及使用介绍
Mar 10 #Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 #Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 #Javascript
jquery怎样实现ajax联动框(二)
Mar 08 #Javascript
You might like
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
python xpath获取页面注释的方法
2019/01/14 Python
详解如何设置Python环境变量?
2019/05/13 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
护士实习自我鉴定
2013/10/22 职场文书
三年级评语大全
2014/04/23 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
代收款委托书范本
2014/10/01 职场文书
活着观后感
2015/06/03 职场文书
就业证明函
2015/06/17 职场文书
如何用python绘制雷达图
2021/04/24 Python