html代码 刷新后 网页跳转 不刷新 不跳转

html代码 刷新后 网页跳转 不刷新 不跳转,第1张

通常HTML文件需要浏览者来选择浏览的内容,如果想自动更换显示的内容一般要用到javascript、JAVA或CGI等方法来完成。

现在可以用META实现自动更换显示内容,更换的时间和文件都可以自行设定。语句如下:

程序代码:

<HEAD>

<TITLE>刷新内容</TITLE>

<META HTTP-EQUIV="REFRESH" CONTENT="xURL=*.*">

</HEAD>

其中,x 是刷新的时间,单位是秒。*.* 是刷新的文件。

利用<META>标签实现Web的自动跳转

在Web上显示一段欢迎信息,隔一定秒数后,自动跳转到其他的Web页 面,由此可以造成新奇的效果。其实现方法是在<HEAD >与</HEAD >标签之间加上如下语句:

<meta http-equiv="Refresh" content="秒数url=跳转的文件或地址">

如将一个显示欢迎信息的图像:welcome.gif存放在与HTML文档同一个目录中,则下面的HTML文件在浏览器中显示该图像,3 秒钟后将自动跳

程序代码:

<HTML>

<HEAD>

<TITLE>WELCOME</TITLE>

<meta http-equiv="Refresh" content="3url=http://www.sinobuy.cn">

</HEAD>

<BODY><img SRC="welcome.gif" ></BODY>

</HTML>

这个是HTML4标准的history对象的常用方法。 功能 :保存浏览器的历史浏览记录 length属性 length 可以获取到当成访问的链接数量 back和forward方法 go方法 上面是针对HTML4标准的hitory对象的常用方法。HTML5基于原有对象方法新政了两个实用的API方法。 功能是向历史记录栈中添加一条记录,常用于实现页面的无刷新跳转,其调用格式如下。 其中data参数表示再添加记录时传递的数据对象,该对象通常为JSON格式的字符串,参数title为页面显示的标题,可选参数为页面跳转地址,默认值为当前地址 功能是修改当前的历史记录值 各个参数的使用说明与pushState相同。 此外,history对象还有一个重要的state属性,通过该属性可以获取使用pushState方法新增的实体对象的内容,即在使用pushState方法增加时data参数的实体值,它的调用格式如下。 location对象的功能是管理浏览器的地址。最常见的是href属性和reload方法。前者可以获取当前浏览器的地址,后者方法可以重新按地址加载当前页面。

下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件。

1、html的实现

<head>

<!-- 以下方式只是刷新不跳转到其他页面 -->

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

<!-- 以下方式定时转到其他页面 -->

<meta http-equiv="refresh" content="5url=hello.html"> 

</head>

优点:简单;

缺点:Struts Tiles中无法使用。

2、javascript的实现

<script language="javascript" type="text/javascript"> 

// 以下方式直接跳转

window.location.href='hello.html'

// 以下方式定时跳转

setTimeout("javascript:location.href='hello.html'", 5000) 

</script>

优点:灵活,可以结合更多的其他功能;

缺点:受到不同浏览器的影响。

3、结合了倒数的javascript实现(IE)

<span id="totalSecond">5</span>

<script language="javascript" type="text/javascript"> 

var second = totalSecond.innerText 

setInterval("redirect()", 1000) 

function redirect(){ 

totalSecond.innerText=--second 

if(second<0) location.href='hello.html' 

</script>

优点:更人性化;

缺点:firefox不支持(firefox不支持span、div等的innerText属性)。

4、解决Firefox不支持innerText的问题

<span id="totalSecond">5</span>

<script language="javascript" type="text/javascript"> 

if(navigator.appName.indexOf("Explorer") > -1){ 

document.getElementById('totalSecond').innerText = "my text innerText" 

} else{ 

document.getElementById('totalSecond').textContent = "my text textContent" 

</script>

5、整合3)和3')

<span id="totalSecond">5</span>

 

<script language="javascript" type="text/javascript"> 

var second = document.getElementById('totalSecond').textContent 

 

if (navigator.appName.indexOf("Explorer") > -1)  { 

    second = document.getElementById('totalSecond').innerText 

} else { 

    second = document.getElementById('totalSecond').textContent 

 

setInterval("redirect()", 1000) 

function redirect() { 

if (second < 0) { 

    location.href = 'hello.html' 

} else { 

    if (navigator.appName.indexOf("Explorer") > -1) { 

        document.getElementById('totalSecond').innerText = second-- 

    } else { 

        document.getElementById('totalSecond').textContent = second-- 

    } 

</script>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6132263.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-15
下一篇 2023-03-15

发表评论

登录后才能评论

评论列表(0条)

保存