欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

js将iframe中控件的值传到主页面控件中的实现方法

时间:2022-10-13 14:15:57|栏目:JavaScript代码|点击:

现在来看一下代码的实现,首先来看一个主界面的代码

复制代码 代码如下:

<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)调用主页面的函数进行操作即可。

这是未点击按钮前的效果,现在点击按钮查看效果。

这样就实现了传值的效果

上一篇:微信小程序 安全包括(框架、功能模块、账户使用)详解

栏    目:JavaScript代码

下一篇:javascript 定时自动切换的选项卡Tab

本文标题:js将iframe中控件的值传到主页面控件中的实现方法

本文地址:http://www.codeinn.net/misctech/216227.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有