编程 Javascript

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中巧用“闭包”实现程序的暂停执行功能

Apr 04 Javascript

javascript add event remove event

Apr 07 Javascript

javascript 拷贝节点cloneNode()使用介绍

Apr 03 Javascript

jQuery实现图片加载完成后改变图片大小的方法

Mar 29 Javascript

javascript特效实现——当前时间和倒计时效果的简单实例

Jul 20 Javascript

jQuery查找dom的几种方法效率详解

May 17 jQuery

详解让sublime text3支持Vue语法高亮显示的示例

Sep 29 Javascript

JS在if中的强制类型转换方式

Jul 15 Javascript

使用VueCli3+TypeScript+Vuex一步步构建todoList的方法

Jul 25 Javascript

使用layer弹窗,制作编辑User信息页面的方法

Sep 27 Javascript

详解Vue Cli浏览器兼容性实践

Jun 08 Javascript

node.js +mongdb实现登录功能

Jun 18 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

实时抓取YAHOO股票报价的代码

2006/10/09 PHP

笑谈配置,使用Smarty技术

2007/01/04 PHP

php生成随机颜色方法汇总

2014/12/03 PHP

PHP程序中使用adodb连接不同数据库的代码实例

2015/12/19 PHP

php curl中gzip的压缩性能测试实例分析

2016/11/08 PHP

php中final关键字用法分析

2016/12/07 PHP

CentOS 上搭建 PHP7 开发测试环境

2017/02/26 PHP

JS 页面内容搜索，类似于 Ctrl+F功能的实现代码

2007/08/13 Javascript

Code:　write(s,d) 输出连续字符串

2007/08/19 Javascript

JavaScript判断窗口是否最小化的代码(跨浏览器)

2010/08/01 Javascript

将json当数据库一样操作的javascript lib

2013/10/28 Javascript

浅谈javascript的url参数parse和build函数

2017/03/04 Javascript

tab栏切换原理

2017/03/22 Javascript

javascript实现二叉树遍历的代码

2017/06/08 Javascript

bootstrap 通过加减按钮实现输入框组功能

2017/11/15 Javascript

微信小程序分享海报生成的实现方法

2018/12/10 Javascript

详解基于原生JS验证表单组件xy-form

2019/08/20 Javascript

jQuery实现滑动开关效果

2020/08/02 jQuery

vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作

2020/09/10 Javascript

Python GAE、Django导出Excel的方法

2008/11/24 Python

利用Python爬虫给孩子起个好名字

2017/02/14 Python

Python遍历文件夹和读写文件的实现方法

2017/05/10 Python

Python编程求解二叉树中和为某一值的路径代码示例

2018/01/04 Python

python处理csv数据动态显示曲线实例代码

2018/01/23 Python

python机器人行走步数问题的解决

2018/01/29 Python

python判断一个数是否能被另一个整数整除的实例

2018/12/12 Python

Python根据当前日期取去年同星期日期

2019/04/14 Python

Python之NumPy(axis=0 与axis=1)区分详解

2019/05/27 Python

pytorch之inception_v3的实现案例

2020/01/06 Python

Python 输出详细的异常信息(traceback)方式

2020/04/08 Python

Python实现淘宝秒杀功能的示例代码

2021/01/19 Python

Penhaligon’s英国官网：成立于1870年的英国香水制造商

2021/02/18 全球购物

防灾减灾活动总结

2014/08/30 职场文书

关于晚自习早退的检讨书

2014/09/13 职场文书

行政执法队伍作风整顿剖析材料

2014/10/11 职场文书

vue如何清除浏览器历史栈

2022/05/25 Vue.js