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动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
详解JS中的attribute属性
Apr 25 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
SONY ICF-SW7600的电路分析
2021/03/02 无线电
php 远程关机操作的代码
2008/12/05 PHP
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
Python类中self参数用法详解
2020/02/13 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
法院四风对照检查材料思想汇报
2014/10/06 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
Python之基础函数案例详解
2021/08/30 Python
Nginx内网单机反向代理的实现
2021/11/07 Servers