Jquery 页面间传值(非QuerryString)

时间:2023-03-09 09:52:18
Jquery 页面间传值(非QuerryString)

实现原理: 实现方式不是很复杂,父页面A打开一个子页面 A1,并同时写一个带参数的接收数据函数Receive(result),在A1页面进行逻辑操作,然后调用父页面A的Receive(result)函数,将结果传递到父页面。

使用场景:数据选择,参数计算等在多信息页面同一个页面展示影响页面美观。

父页面:

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>页面间通过JS传值</title>
<script src="//cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function CC_Click() {
window.open("default.html","SelectUser", "scrollbars=yes,width=600,height=400,left=150,top=100,status=yes,resizable=yes");
} function GetResultFromDefault(result) {
$("#Result").val(result)
}
</script>
</head> <body>
<div id="Div_Class"> <button onclick="CC_Click()"> click me </button>
<input type="text" id="Result" value="Nothing"></input>
</div> </body> </html>

子页面:

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="//cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script>
function SendInfo() {
var Resu = $("#info").val();
if(window.opener == null) {
window.close();
return;
} else {
window.opener.GetResultFromDefault(Resu);
window.close();
}
}
</script>
</head> <body>
<div>
<input type="text" id="info" />
<button onclick="SendInfo()">Send</button>
</div>
</body> </html>