JS父页面与子页面相互传值方法
一、子页面是父页面通过window.open弹出的情况
子页面要向父页面传值，只要在document前面加window.opener即可。
如：
1.父页面代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
head>
<script language="javascript">
function tanchu()
{
window.open("Untitled-5.html");
}
script>
<body>
<form id="form1" name="form1" method="post" action="">
<label> <input type="submit" name="button" id="button" value="提交"
onclick="tanchu()" />
label> <label> <input type="text" name="textfield" id="textfield" />
label>
form>
</body>
</html>
2.子页面代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
head>
<script language="javascript">
function aaa()
{
window.opener.document.getElementByIdx('textfield').value='123123123';
}
script>
<body>
<form id="form1" name="form1" method="post" action="">
<label> <input type="submit" name="button" id="button" value="提交"
onclick="aaa()" />
label>
form>
</body>
</html>
二、子页面是iframe框架中的页面情况
子页面要向父页面传值，只要在document前面加parent即可。
1.父页面代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
head>
<body>
<form id="form1" name="form1" method="post" action="">
<label> <input type="text" name="textfield" id="textfield" />
label>
<iframe id="myiframe" src="Untitled-3.html">iframe>
form>
</body>
</html>
2.子页面代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
head>
<script language="javascript">
function aa()
{
var a=parent.document.getElementByIdx('textfield').value;
alert(a);
}
script>
<body>
<form id="form1" name="form1" method="post" action="">
<label> <input type="submit" name="button" id="button" value="提交"
onClick="aa()" />
label>
form>
</body>
</html>
相关文章
这篇文章主要介绍了javascript获取select值的方法,结合完整实例形式分析了javascript动态遍历与操作页面元素相关实现技巧,需要的朋友可以参考下2019-06-06
Object.keys()、Object.values()、Object.entries()用法总结
本文主要介绍了Object.keys()、Object.values()、Object.entries()用法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
FileReader是前端进行文件处理的一个重要的API,特别是在对图片的处理上,这篇文章主要给大家介绍了关于Js中FileReader相关操作方法的相关资料,需要的朋友可以参考下2024-07-07
navigator对象现在已经成为识别客户端浏览器的事实标准，navigator对象是所有支持javascript的浏览器所共有的。本文将详细介绍navigator对象和用户代理检测。下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了微信公众号平台接口开发 菜单管理的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
uniapp官方虽然提供了uni-data-checkbox,含括了单选和多选框功能,但是它功能是在不能满足需求,下面这篇文章主要给大家介绍了关于uniapp中单选按钮的实现代码,需要的朋友可以参考下2023-01-01
JavaScript和其他语言一样,都拥有捕获异常的机制,下面这篇文章主要给大家介绍了关于JS中异常抛出和处理的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
为什么要做圆角的div： 圆角div平滑美观，某些情况下有比较不错的效果。比如说要做一个报message的消息框，那么动态的生成一个圆角div则很有意义。而对html样式控制的css本身是不直接支持圆角div的。2009-10-10
通常为了减少页面加载时间,先把核心内容显示处理,页面加载完成后再发送ajax请求获取其他数据,这时就可能产生多个ajax请求,为了用户体验，最好是发送并行请求,这篇文章主要给大家介绍了关于如何基于JS实现Ajax并发请求控制的相关文章,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了js实现兼容性好的微软官网导航下拉菜单效果,涉及JavaScript基于鼠标事件实现页面样式变换的技巧,非常具有实用价值,需要的朋友可以参考下2015-09-09
最新评论