js将iframe中控件的值传到主页面控件中的实现方法
更新时间：2013年03月11日 12:01:03 作者：
主要是通过在主页面定义一个传输数据的函数GetData(data)，然后在iframe嵌入页面中通过parent.GetData(data),这样即可在GetData实现将data进行处理即可。
现在来看一下代码的实现，首先来看一个主界面的代码
复制代码 代码如下:
<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多种滤镜算法实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
无名函数，其中一个作用可能是生成新的函数对象的引用，主要是用于定义。2011-06-06
JavaScript直接调用函数与call调用的区别实例分析
这篇文章主要介绍了JavaScript直接调用函数与call调用的区别,结合额实例形式分析了JavaScript直接调用函数与call调用的基本用法、区别及相关注意事项,需要的朋友可以参考下2020-05-05
Javascript中字符串replace方法的第二个参数探究
当我们要把一段字符串中的某些指定字符替换掉，第一时间想到的就是replace方法，他的用法很简单，W3school上讲的清晰易懂。网上有关replace的文章也有很多了，那么这篇这里主要聊聊它的第二个参数，下面来一起看看，注意阅读本文需要对replace方法有一定了解。2016-12-12
这篇文章主要介绍了JavaScript中一些特殊的字符运算的相关资料,需要的朋友可以参考下2017-08-08
这篇文章主要为大家详细介绍了原生JavaScript实现贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要介绍了javascript实现blob加密视频源地址的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
javascript跟随滚动条滚动的层(浮动AD效果)...2007-08-08
js气泡效果，在项目需求中经常遇到。今天小编把大概实现步骤分享到脚本之家平台，感兴趣的朋友可以参考下2016-05-05
二分查找也称折半查找,它是一种效率较高的查找方法,本文主要介绍了JS实现二分查找的示例代码,具有一定的参考价值,感兴趣的可以了解一下2023-11-11
最新评论