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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
vue项目关闭eslint校验
Mar 21 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 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 Token(令牌)设计
2008/03/15 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
js cookies实现简单统计访问次数
2009/11/24 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
js实现指定时间倒计时效果
2019/08/26 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
python SVM 线性分类模型的实现
2019/07/19 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
Python列表list操作相关知识小结
2020/01/29 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
春节慰问简报
2015/07/21 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL