网页制作实现网页页面跳转的几种方法示例全解析

2009-04-16 0 条评论 5,330 次阅读 被赞了 0 次
本文发布于：2009-04-16，最后更新于：2016-08-20，如果内容失效请留言告知。
目录
[隐藏]

一 三种网页跳转代码

如果你要在服务器端(asp)跳转，可以这样：

Response.Redirect('https://lzw.me')
Response.End

如果你要在客户端跳转，可以这样：

<script language="javascript" type="text/javascript">
window.location="https://lzw.me";
</script>

如果你要让页面显示几秒钟之后跳转，可以在html代码的<head></head>部分加上这样的代码：

<meta http-equiv="refresh" content="3; url=http://lzw.me">
（3秒钟后自动跳转到 lzw.me）

以上三种是也比较常见,比较常用的网页跳转代码运行平台Win9x WinNT Win2000 WinME WinXP。

二 几段简单的网页跳转代码

不隐藏转向之后的地址 代码一：

<html>
<body>
<form name=loading>
<P align=center><FONT face=Arial color=#0066ff size=2>loading...</FONT> <INPUT 
style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bolder; PADDING-BOTTOM: 0px; COLOR: #0066ff; BORDER-TOP-style: none; PADDING-TOP: 0px; FONT-FAMILY: Arial; BORDER-RIGHT-style: none; BORDER-LEFT-style: none; BACKGROUND-COLOR: white; BORDER-BOTTOM-style: none" 
size=46 name=chart> <BR><INPUT 
style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; COLOR: #0066ff; BORDER-BOTTOM: medium none; TEXT-ALIGN: center" 
size=47 name=percent>
<SCRIPT> 
var bar=0 
var line="||" 
var amount="||" 
count() 
function count(){ 
bar=bar+2 
amount =amount + line 
document.loading.chart.value=amount 
document.loading.percent.value=bar+"%" 
if (bar<99) 
{setTimeout("count()",100);} 
else 
{window.location = "http://lzw.me";} 
}</SCRIPT>
</P></form>
</body>
</html>

不隐藏转向之后的地址 代码二：

<html>
<body>
<script language="javascript">
<!--
function goToURL() { //v2.0
for (var i=0; i< (goToURL.arguments.length - 1); i+=2) //with arg pairs
eval(goToURL.arguments+".location=''"+goToURL.arguments[i+1]+"''");
document.returnvalue = false;
}
//-->
</script>
<body bgcolor="#FFFFFF">
</body>
</html>

不隐藏转向之后的地址 代码三：

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<SCRIPT LANGUAGE="javascript">
<!-- Start Code
var ver = navigator.appVersion;
if (ver.indexOf("MSIE") != -1)
{
window.location.href="http://lzw.me"
}else
window.location.href="http://lzw.me"
// End Code -->
</SCRIPT>
</html>

不隐藏转向之后的地址 代码四：

<html>
<body>
<meta http-equiv="refresh" content="0.1;url=http://lzw.me">
</body>
</html>

可隐藏转向之后的地址:

<html>
<frameset framespacing="0" border="0" rows="0" frameborder="0">
<frame name="main" src="http://zhiwneweb.cn" scrolling="auto" noresize>
</frameset>
</html>

三

网页跳转

<meta http-equiv="refresh" content="3;rul=跳转的网页">

此代码可以让网页在一定的时间内，跳转到另外一个网页上，其中content=” 为跳转前停暂的秒数，rul= 为跳转的网址

<meta http-equiv="refresh" content="3;rul=跳转的网页">

此代码可以让网页在一定的时间内，跳转到另外一个网页上，其中content=” 为跳转前停暂的秒数，rul= 为跳转的网址

<html>
<head>
<title>网页跳转</title>
<meta http-equiv="refresh" content="0;url=http://lzw.me">
</head>
<body>
</body>
</html>

1，页面自动刷新：把如下代码加入<head>区域中

<meta http-equiv="refresh" content="20">

其中20指每隔20秒刷新一次页面.
2，页面自动跳转：把如下代码加入</head><head>区域中

<meta http-equiv="refresh" content="20;url=http://lzw.me">

其中20指隔20秒后跳转到http://lzw.me页面。

<html>
<head>
<title>正在进入>>> Loading>>> </title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p> </p><tr> <td width=724>
<p align=center><font color="red" size="2">正在进入,请等待,谢谢......</font></p></td></tr><tr>
<td width="724">
<p align=center>
<form name=loading>
<div align=center>
<p>
<input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:rgb(124,119,119); background-color:white; padding:0px; border-style:none;">
<br /> <input type=text name=percent size=46 style="color:rgb(138,134,134); text-align:center; border-width:medium; border-style:none;"><script>var bar = 0
var line = "||"
var amount ="||"
count()
function count(){
bar= bar+2
amount =amount     +     line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar<99)
{setTimeout("count()",10);}
else
{window.location = "http://lzw.me";}
}</script>
</body>
</html>

如果要cgi的文件，可以用以下方式：

#!/usr/bin/perl
print "Content-type:text/html ";
print<<END;
<html>
<head>
<title>正在进入 http://lzw.me >>> Loading>>> </title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p> </p><tr> <td width=724>
<p align=center>　</p>
<p align=center><b><font size="6">新地址:</font><font color="red" size="6"> http://lzw.me
!</font></b></p>
<p align=center><b><font size="6">正在进入,请等待,谢谢......</font></b></p></td></tr><tr>
<td width="724">
<p align=center>
<form name=loading>
<div align=center>
<p>
<input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:rgb(124,119,119); background-color:white; padding:0px;
border-style:none;">
<br /> <input type=text name=percent size=46 style="color:rgb(138,134,134); text-align:center; border-width:medium; border-style:none;"
><script>
var bar = 0
var line = "||"
var amount ="||"
count()
function count(){
    bar= bar+2
    amount = amount + line
    document.loading.chart.value = amount
    document.loading.percent.value = bar + "%"
    if (bar < 99) {
        setTimeout("count()", 10);
    } else {
        window.location = "http://lzw.me";
    }
}
</script>
</body>
</html>
END
exit;

以 htm 可以用以下方式：

<html>
<body>
<script language=&apos;javascript&apos;>document.location= &apos;http://l39.net/lb5000/leoboard.cgi&apos;</script>
</body>
</html>

以 asp 可以用以下方式：

<%
response.redirect "http://l39.net/lb5000/leoboard.cgi"
%>

四

  1. 在</head><head></head>区域加入
1
2
<meta http-equiv=Pragma content=no-cache>
<Meta http-equiv="refresh" content="3;url=http://lzw.me ">
  1. JavaScript
1
2
3
4
5
6
7
8
9
10
<html><body>
<SCRIPT LANGUAGE="JavaScript">
 
<!-- Begin
redirTime = "3000";
redirURL = "http://lzw.me/";
function redirTimer() { self.setTimeout("self.location.href = redirURL;",redirTime); }
//     End -->
</script>
</body></html>
  1. JavaScript
1
2
3
4
5
<html><head><title>稍候。。。</title></head>
<body>
<script language='javascript'>document.location = 'http://lzw.me'</script>
</body>
</html>
  1. 带进度条的页面跳转代码
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<title>新视听资源共享论坛</title>
</head>
<body>
<form name=loading>
<P align=center><FONT face=Arial color=#0066ff size=2>loading...</FONT> <INPUT
style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bolder; PADDING-BOTTOM: 0px; COLOR: #0066ff; BORDER-TOP-style: none; PADDING-TOP: 0px; FONT-FAMILY: Arial; BORDER-RIGHT-style: none; BORDER-LEFT-style: none; BACKGROUND-COLOR: white; BORDER-BOTTOM-style: none"
size=46 name=chart> <BR><INPUT
style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; COLOR: #0066ff; BORDER-BOTTOM: medium none; TEXT-ALIGN: center"
size=47 name=percent>
<SCRIPT>
var bar=0
var line="||"
var amount="||"
count()
function count(){
bar=bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar<99)
{setTimeout("count()",100);}
else
{window.location = "http://lzw.me/";}
}</SCRIPT>
</P></form>
</body>
</html>

五 网页跳转方法+代码

  1. window.location
1
<body onload=window.location="http://lzw.me"></body>

或（此法应用范围较广，并可应用在一般后台编辑器中）

1
<script>window.location="http://xxx"</script>
  1. META标志
1
2
<META HTTP-EQUIV=refresh content="0; url=http://www.***.com(请换成你的网址)">
//其中content后面的阿拉伯数字是代表过几秒中钟转入目标网页。
  1. 利用框架隐藏转向地址（此方法不便用 dreamweaver 编辑，请使用记事本或其他文本编辑器处理）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>知觅__朱高站</title>
</head>
<frameset rows="*,0" frameborder="no" border="0" framespacing="0">
<frame src="http://lzw.me" name="mainFrame" id="mainFrame">
<frame src="" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame">
</frameset>
<noframes>
<body>
 
</body>
</noframes>
</html>

六

<html> 
<head> 
<title>页面跳转</title> 
<meta http-equiv="refresh" content="3;url=http://lzw.me"> 
</head> 
<body> 
此页面三秒后跳转到http://lzw.me
</body> 
</html>

七 html中跳转最全代码

<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>正在进入</title>
</head>
<body>
<form name=loading>
　<p align=center> <font color="#0066ff" size="2">正在进入，请稍等</font><font color="#0066ff" size="2" face="Arial">...</font>
　　<input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;">
　　<input type=text name=percent size=47 style="color:#0066ff; text-align:center; border-width:medium; border-style:none;"> 
　　<script>　 
var bar=0　 
var line="||"　 
var amount="||"　 
count()　 
function count(){　 
bar=bar+2　 
amount =amount + line　 
document.loading.chart.value=amount　 
document.loading.percent.value=bar+"%"　 
if (bar<99)　 
{setTimeout("count()",100);}　 
else　 
{window.location = "http://lzw.me";}　 
}</script> 
　</p> 
</form> 
<p align="center"> 如果您的浏览器不支持跳转,<a style="text-decoration: none" href="http://lzw.me"><font color="#FF0000">请点这里</font></a>.</p>
</body>
</html>

一个弹出窗口的代码 

<script LANGUAGE="javascript"> window.open ('http://lzw.me', 'newwindow', 'height=400, width=500, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')</script>

浮动广告代码

<script>
var imagepath = "http://www.baidu.com/img/logo.gif" //这里是浮动图片的地址
var imagewidth = 171 //这两行写图片的大小
var imageheight = 133
var speed = 3;
var imageclick = "http://lzw.me/" //这里写点击图片连接到的地址
var hideafter = 0
var isie = 0;
if (window.navigator.appName == "Microsoft Internet Explorer" && window.navigator.appVersion.substring(window.navigator.appVersion.indexOf("MSIE") + 5, window.navigator.appVersion.indexOf("MSIE") + 8) >= 5.5) {
    isie = 1;
} else {
    isie = 0;
}
if (isie) {
    var preloadit = new Image();
    preloadit.src = imagepath;
}

function pop() {
    if (isie) {
        x = x + dx;
        y = y + dy;
        oPopup.show(x, y, imagewidth, imageheight);
        if (x + imagewidth + 5 > screen.width) dx = -dx;
        if (y + imageheight + 5 > screen.height) dy = -dy;
        if (x < 0) dx = -dx;
        if (y < 0) dy = -dy;
        startani = setTimeout("pop();", 50);
    }
}

function dismisspopup() {
    clearTimeout(startani)
    oPopup.hide()
}

function dowhat() {
    if (imageclick == "dismiss") {
        dismisspopup()
    } else {
        window.open(imageclick);
    }
}
if (isie) {
    var x = 0,
        y = 0,
        dx = speed,
        dy = speed;
    var oPopup = window.cr & #101;atePopup();
    var oPopupBody = oPopup.document.body;
    oPopupBody.style.cursor = "hand";
    oPopupBody.innerHTML = '<IMG SRC= "'+preloadit.src+'" >';
    oPopup.document.body.onmouseover= new Function("clearTimeout(startani)");
    oPopup.document.body.onmouseout = pop;
    oPopup.document.body.onclick = dowhat;
    pop();
    if (hideafter > 0) {
        setTimeout("dismisspopup()", hideafter * 1000)
    }
}
</script>

相关文章:

Default ThumbnailCSS实现垂直居中的5种方法分析及示例 Default Thumbnail解除网页右键被锁定无法复制文字的简单方法 Default Thumbnailauthorware实现网页网址超级链接的几种方法 Default Thumbnail为网页设置页面切换时的换页过渡效果 Default Thumbnail网页实现自动刷新代码 Default Thumbnail【转】整理：100种网站建设常用的网络推广方法 Default Thumbnail用php将数据库导出成excel的简单方法 Default Thumbnail域名后缀含义-各种域名后缀含义解析&通用域名状态和含义解释 Default Thumbnail发帖伪原创的N种方法 Default Thumbnail学习研究：刷统计代码获得真实流量的两种方法 Default Thumbnail网站网页关键词密度的设计 Default ThumbnailJavaScript的16类陷阱总结解析
点赞 (0)
知识共享许可协议
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code