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 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
js+canvas绘制图形验证码
Sep 21 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 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从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
JQuery与iframe交互实现代码
2009/12/24 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
python根据日期返回星期几的方法
2015/07/06 Python
PyQt5实现下载进度条效果
2018/04/19 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
优秀的毕业生的自我评价
2013/12/12 职场文书
留学自荐信写作方法
2014/01/27 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
党员志愿者活动方案
2014/08/28 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
同事离别感言
2015/08/04 职场文书