编程 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 相关文章推荐

JQuery 小练习(实例代码)

Aug 07 Javascript

jQuery源码分析-02正则表达式 RegExp 常用正则表达式

Nov 14 Javascript

Juery解决tablesorter中文排序和字符范围的方法

May 06 Javascript

jQuery实现弹出窗口中切换登录与注册表单

Jun 05 Javascript

JavaScript简单修改窗口大小的方法

Aug 03 Javascript

js 判断所选时间(或者当前时间)是否在某一时间段的实现代码

Sep 05 Javascript

基于jQuery实现动态搜索显示功能

May 05 Javascript

WebSocket+node.js创建即时通信的Web聊天服务器

Aug 08 Javascript

AngularJs unit-testing（单元测试）详解

Sep 02 Javascript

微信小程序使用radio显示单选项功能【附源码下载】

Dec 11 Javascript

vsCode安装使用教程和插件安装方法

Aug 24 Javascript

nuxt 自定义 auth 中间件实现令牌的持久化操作

Nov 05 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