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代码
Aug 13 Javascript
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
原生js 秒表实现代码
Jul 24 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 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
综合图片计数器
2006/10/09 PHP
PHP array 的加法操作代码
2010/07/24 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
php创建类并调用的实例方法
2019/09/25 PHP
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
python连接数据库的方法
2017/10/19 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
详解重置Django migration的常见方式
2019/02/15 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python解析多帧dicom数据详解
2020/01/13 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
管理科学大学生求职信
2013/11/13 职场文书
宿舍管理制度范本
2015/08/07 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
学生检讨书范文
2019/06/24 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android
JS实现九宫格拼图游戏
2022/06/28 Javascript