常用的3种页面跳转方式

53 阅读 0 评论 35 点赞

我是靠谱客的博主舒适万宝路，最近开发中收集的这篇文章主要介绍常用的3种页面跳转方式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、window.open

父页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>父页面</title>

<script type="text/javascript">
function clickMe(){
window.open("son.jsp",null,"height=300,width=450,Left=300px,Top=20px,menubar=no,titlebar=no,scrollbar=no,toolbar=no, status=no,location=no");
var a = document.getElementById("text1");
alert(a);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input name="text1" id="text1" type="text" />

<input type="button" value="点我" id="Button1" οnclick="clickMe();"/>
</div>
</form>
</body>

</html>

参数说明：
window.open 弹出新窗口的命令；
　　'page.html' 弹出窗口的文件名；
　　'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；
　　height=100 窗口高度；
　　width=400 窗口宽度；
　　top=0 窗口距离屏幕上方的象素值；
　　left=0 窗口距离屏幕左侧的象素值；
　　toolbar=no 是否显示工具栏，yes为显示；
　　menubar，scrollbars 表示菜单栏和滚动栏。
　　resizable=no 是否允许改变窗口大小，yes为允许；
　　location=no 是否显示地址栏，yes为允许；
　　status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

子页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>子页面</title>

<title></title>
<script type="text/javascript">
function Button1_onclick() {
var a = "aaa";
var b = "bbb";
// window.opener.$("#text1").val(a + "|" + b);
window.opener.document.getElementById("text1").value = a + "|" + b;
self.close();
}
</script>

</head>
<body>

　　 <form id="form1" runat="server">
<div>
<input type="submit" id="Button1" οnclick="Button1_onclick();" />
</div>
</form>

</body>

</html>

在子页面给父页面的input框赋值

通过 window.opener.document.getElementById("text1").value = a + "|" + b;赋值（js）

或者$("text1").val("值")(jquery)

注：该方式打开子页面后，可以对父页面其他输入框进行编辑

2、模态框

父页面

var test = window.showModalDialog('url'?参数1=‘’+‘参数2’+‘参数3’，window，‘status：no;dialogWidth:xxxpx;dialogHeight:xxxpx;scroll:no;help:no;’)

test可以得到子页面赋的值

参数说明：
sURL
必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
dialogHeight 对话框高度，不小于100px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
　 dialogWidth: 对话框宽度。
　 dialogLeft: 距离桌面左的距离。
　 dialogTop: 离桌面上的距离。
　 center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
　 help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
　 resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。
　 status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。