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陷阱清单
May 31 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
详解Vue中CSS样式穿透问题
Sep 12 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中多维数组的foreach遍历示例
2014/06/13 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
Java中final关键字详解
2015/08/10 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
Python中函数的用法实例教程
2014/09/08 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python获取邮件地址的方法
2015/07/10 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
python 获取url中的参数列表实例
2018/12/18 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
小学三年级数学教学反思
2014/01/31 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
开天辟地观后感
2015/06/09 职场文书
爱护公物主题班会
2015/08/17 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python