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

169 阅读 0 评论 112 点赞

我是靠谱客的博主天真电话，最近开发中收集的这篇文章主要介绍js将iframe中控件的值传到主页面控件中的实现方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

复制代码代码如下:

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