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 相关文章推荐
javawscript 三级菜单的实现原理
Jul 01 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
vue - props 声明数组和对象操作
Jul 30 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 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内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
php导出生成word的方法
2015/12/25 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
JS实现切换标签页效果实例代码
2013/11/01 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
webpack3+React 的配置全解
2017/08/21 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
python实现简单的TCP代理服务器
2014/10/08 Python
linux 下实现python多版本安装实践
2014/11/18 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
调查研究项目计划书
2014/04/29 职场文书
机动车交通事故协议书
2015/01/29 职场文书
学校捐书活动总结
2015/05/08 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP