开发中遇到父子页面传值问题会很棘手,现收集两种方式的父子页面传值的方式,以方便今后使用
1)弹窗式,通过使用window.showModalDialog()
父页面parent.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript">
<!--
function show()
{
var a=window.showModalDialog('child.html',"_blank",'dialogWidth:480px;dialogHeight:460px;center:yes;resizable:no;scroll:no');
document.dForm.p.value=a;
}
//-->
</script>
<body>
<form name="dForm" id="dForm" method="post" onsubmit="return dFormCK();" action="abc.php">
<input type="text" size="30" name="p" id="p" value=""/>
</form>
<a href="javascript:void(0);" onclick="show();">ShowModelDialog</a>
</body>
</html>
子窗口child.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base target="_self">
<body>
<input type="button" onclick="JavaScript:window.returnValue='hahahhah';window.close();" value="sure">
<input type="button" onclick="JavaScript:window.returnValue='';window.close();" value="cancel">
</body>
点击父页面上的链接弹出子窗口,在子窗口中点击确定传值到父页面,实现效果如下图所示
2)新页面式,通过使用window.open()
父页面parent.html
<HTML>
<HEAD>
<TITLE> parent </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function method(){
window.open("child.html");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="" >
<INPUT TYPE="text" NAME="" id="text1"><br>
</FORM>
<INPUT TYPE="button" value="foward" onclick="method()">
</BODY>
</HTML>
子页面child.html
<HTML>
<HEAD>
<TITLE>child</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function getValue(str){
window.opener.document.getElementById("text1").value=str;
window.close();
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<A href="" onclick="getValue('11')">11</A>
<A href="" onclick="getValue('22')">22</A>
<A href="" onclick="getValue('33')">33</A>
<A href="" onclick="getValue('44')">44</A>
</BODY>
</HTML>
点击父页面按钮跳转到新页面,也就是子页面,点击子页面的链接将值传递回父页面中,实现效果如下图所示
- 大小: 30.4 KB
- 大小: 16.9 KB
- 大小: 4.2 KB
- 大小: 3.7 KB
- 大小: 4.3 KB
分享到:
相关推荐
本文介绍了layer弹出子iframe层父子页面传值的实现方法,分享给大家,具体如下: 父页面获取子页面元素 格式: $("#iframeID").contents().find("#eleID") 示例代码: father.html <!DOCTYPE html> <...
Web开发中的window.open父子窗口传值问题 部署在tomcat中进行
asp.net父子页面传值,资源共享是为了共同进步, 希望帮助需要的兄弟。
用途:把父页面的数据表格中的指定行数据传递到子页面,在子页面中把数据传递到父页面。内有项目一个,说明文本一个。
对于Iframe的父窗体与子窗体互相传值
ie+FF通用的父子模态对话框相互传值,已经自己验证过的,保证没有问题
本文实例讲述了JS简单实现父子窗口传值功能。分享给大家供大家参考,具体如下: 父窗口页面father.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE&...
两个窗口传值,关于进程等问题,两个窗口传值,关于进程等问题
javascript父子页面传参方法,很简单的一个DEMO,大家可以看看哦。
主要介绍了Vue之父子组件传值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
vue非父子组件传值的基本语法 创建一个新的vue对象 var newvue = new Vue() 触发事件 newvue.$emit('自定义事件名', 参数) 监听事件 newvue.on('自定义事件名', 触发方法名) 销毁事件 newvue.off('自定义事件名')...
在Vue中,父子组件传值,子组件通过props接收父组件传递的数据 父组件 questionList :传递数据参数 questionsLists: 传递数据源 子组件 porps 接收父组件方式有俩中,一种是通过对象形式,一种是通过数组形式,...
小程序父子间传值【以自定义头部导航栏为例】 前言: 小程序默认是用它自身的导航栏模板的,如果想用自己自定义的导航栏,就要在app.js中设置一下属性。 step1:创建自定义组件 1.1创建一个components文件夹,用于...
看了官网上的api实现了官网的案例你会发现访问父页面中只能显示父页面中的内容,要想默认的在区域显示一个页面内容怎么办? 自己案例代码: pages/parent.vue 父组件的页面的内容 <!-- 进行切换子页面...
在单页面里面,父子组件传值是比较常见的,这篇文章主要介绍了React父子组件间的传值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
父子窗体之间传值iframe之间的相互操作,还有sturts2指定跳转的页面。
在项目中,需要实现一个在表格里面点击操作,然后弹出layer层,将父层表格的行值传给子页面,子页面拿到值后,进行业务处理,从而实现真正的父子页面交互。 其实,官方文档都说的很清楚了。 layui官方文档:...
父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信; 使用步骤: ... ... 在“name”></com> 使用v-bind 绑定name属性,红色部分为属性...写vue,如果页面涉及到多个组件,就会涉及组件之间的通信,可能是父子