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 相关文章推荐
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
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
mysql时区问题
2008/03/26 PHP
php strcmp使用说明
2010/04/22 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
python实现倒计时的示例
2014/02/14 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
技校生自我鉴定
2013/12/08 职场文书
开学典礼决心书
2014/03/11 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
信访工作个人总结
2015/03/03 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
javascript之Object.assign()的痛点分析
2022/03/03 Javascript