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学习笔记(十七)js 优化
Feb 04 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
关于vue中如何监听数组变化
Apr 28 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
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
javascript 闭包
2011/09/15 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
js+css实现红包雨效果
2018/07/12 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
Python变量作用范围实例分析
2015/07/07 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
python opencv实现图像边缘检测
2019/04/29 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
python 函数中的参数类型
2020/02/11 Python
python regex库实例用法总结
2021/01/03 Python
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
优秀老员工获奖感言
2014/02/15 职场文书
代办委托书怎样写
2014/04/08 职场文书
节约粮食标语
2014/06/18 职场文书
2014年司法局工作总结
2014/12/11 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
创业计划书之美甲店
2019/09/20 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技