JavaScript将iframe中控件的值传到主页面控件中

简介: 主要是通过在主页面定义一个传输数据的函数GetData(data),然后在iframe嵌入页面中通过parent.GetData(data),这样即可在GetData实现将data进行处理即可。 现在来看一下代码的实现,首先来看一个主界面的代码 function GetData(data) { alert(data); document.

主要是通过在主页面定义一个传输数据的函数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)调用主页面的函数进行操作即可。

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

这样就实现了传值的效果

 

目录
相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
3月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
118 2
前端JS读取文件内容并展示到页面上
|
2月前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(一)
JavaScript动态渲染页面爬取——Selenium的使用(一)
70 4
|
2月前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(二)
JavaScript动态渲染页面爬取——Selenium的使用(二)
85 2
|
2月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
|
3月前
|
JavaScript 前端开发
js 回到页面顶部
本文提供了一个JavaScript函数`scrollToTop`,用于平滑滚动页面回到顶部。该函数利用`requestAnimationFrame`和`window.scrollTo`方法逐步减少滚动条距离,直到页面完全回到顶部。
36 1
|
2月前
|
JavaScript 前端开发 API
JavaScript全屏,监听页面是否全屏
JavaScript全屏,监听页面是否全屏
68 0
|
2月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
41 0
|
2月前
|
存储 JSON JavaScript
JavaScript动态渲染页面爬取——Pyppeteer爬取实战
JavaScript动态渲染页面爬取——Pyppeteer爬取实战
43 0
|
3月前
|
JavaScript 前端开发
[收藏]用JavaScript让弹出页面以最小化的形式出现在状态栏中
[收藏]用JavaScript让弹出页面以最小化的形式出现在状态栏中