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 相关文章推荐
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
vue实现行列转换的一种方法
Aug 06 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获取mysql字段名称和其它信息的例子
2014/04/14 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
python基础教程之对象和类的实际运用
2014/08/29 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
python实现折半查找和归并排序算法
2017/04/14 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
python中的itertools的使用详解
2020/01/13 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
通过代码实例了解Python sys模块
2020/09/14 Python
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
大学生求职意向书
2015/05/11 职场文书
法定授权委托证明书
2015/06/18 职场文书
Java界面编程实现界面跳转
2022/06/16 Java/Android