如何实现无效页面自动跳转至首页的效果

 更新时间:2016年9月20日 19:06  点击:1515
很多网友都部如何如现无效页面自动跳转至首页的效果呢,其实很简单啊,下面来讲讲.

如果有自己的主机,就可以定义404错误页面。
现在有些虚拟主要,也支持自定义404错误页面。
比如乐猫,Discuz主机等。都可以的,
可以跟空间提供商联系!

还有一种方法,那就是程序控制,不过不能实现页面地址找不到调转,而我们是规定他转.

在<head></head>写入下面的代码就行了,用然后做一张以.ico为扩展名的图片就行了.
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 

innerHTML,outerHTML innerHTML检索或设置标签内的内容;
outerHTML检索或设置整个标签的内容(包含标签)。

<fieldset id="fieldset" style="width:600;height:40">
<SPAN ID="oSpan">Original Text</SPAN>
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
<input type="button" onclick="alert(document.all.fieldset.outerHTML);" value="outerHTML">
<input type="button" onclick="alert(document.all.fieldset.innerText);" value="innerText">
<input type="button" onclick="alert(document.all.fieldset.outerText);" value="outerText">
</fieldset>

两个alert输出的结果分别是:
innerHTML:

<SPAN ID="oSpan">Original Text</SPAN>
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
<input type="button" onclick="alert(document.all.fieldset.outerHTML);" value="outerHTML">


outerHTML:

<fieldset id="fieldset" style="width:600;height:40">
<SPAN ID="oSpan">Original Text</SPAN>
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
<input type="button" onclick="alert(document.all.fieldset.outerHTML);" value="outerHTML">
</fieldset>


innerText,outText输出标签内部的文本信息
上面两个Text按扭输出同样的内容:
Original Text
但是注意的是,赋值时,outerText会连带标签一起替换成目标文本,innerText只替换原来的文本。

<fieldset id="fieldset" style="width:200;height:40">
<SPAN ID="oSpan">Original Text</SPAN>
</fieldset>
<input type="button" onclick="oSpan.innerText='changed'" value="inner change">
<input type="button" onclick="oSpan.outerText='changed'" value="outer change">
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">

点inner change后,点innerHTML输出结果为:
<SPAN ID="oSpan">changed</SPAN>
点outer change后,点innerHTML输出结果为:
changed

自己用代码来体会一下
HTML 代码片段如下:

<div id=test><table><tr><td>文本<a>链接</a>另一段文本</td></tr></table></div>
<input type=button onclick=alert(test.innerText) value="show innerText"><br>
<input type=button onclick=alert(test.innerHTML) value="show innerHTML"><br>
<input type=button onclick=alert(test.outerHTML) value="show outerHTML"><br>

 


<div id="div"><input name="button" value="Button" type="button"><font color="green"><h2>This is a DIV!</h2></font></div>
<input name="innerHTML" value="innerHTML" type="button" OnClick="alert(div.innerHTML);">
<input name="outerHTML" value="outerHTML" type="button" OnClick="alert(div.outerHTML);">
<input name="innerText" value="innerText" type="button" OnClick="alert(div.innerText);">
<input name="outerText" value="outerText" type="button" OnClick="alert(div.outerText);">

1.创建链接

<script language="javascript">
var o = document.body;
//创建链接
function createA(url,text)
{
    var a = document.createElement("a");
    a.href = url;
    a.innerHTML = text;
    a.style.color = "red";
    o.appendChild(a);
}
createA("http:///","网页教学网");
</script>

2.创建DIV

<script language="javascript">
var o = document.body;
//创建DIV
function createDIV(text)
{
    var div = document.createElement("div");
    div.innerHTML = text;
    o.appendChild(div);
}
createDIV("网页教学网:http:///");
Webjx.Com

</script>

3.创建表单项

<script language="javascript">
var o = document.body;
//创建表单项
function createInput(sType,sValue)
{
    var input = document.createElement("input");
    input.type = sType;
    input.value = sValue;
    o.appendChild(input);
}
createInput("button","ooo");
</script>

4.创建表格


<script language="javascript">
var o = document.body;
//创建表格
function createTable(w,h,r,c)
{
    var table = document.createElement("table");
    var tbody = document.createElement("tbody");
    table.width = w;
    table.height = h;
    table.border = 1; 网页教学网
    for(var i=1;i<=r;i++)
    {
        var tr = document.createElement("tr");
        for(var j=1;j<=c;j++)
        {
            var td = document.createElement("td");
            td.innerHTML = i + "" + j;
            //td.appendChild(document.createTextNode(i + "" + j));
            td.style.color = "#FF0000";
            tr.appendChild(td);
        }
        tbody.appendChild(tr);


    }
    table.appendChild(tbody);
    o.appendChild(table);
}
createTable(270,270,9,9);
</script>

注意:一定要有tbody,否则IE下不能创建表格,FF下可以!

 

这里对web程序方面的优化作一个总结,虽然我用的是PHP其实不管理是什么语言方向都是一样的。
1.编码规范化可读性优化
编码规范我想一般程序员不会不了解,如果你这方面是空白你应该好好补补基础了,做到编码规范是一个好的程序员的最基础要求,一个团队也应该有自己的编码规范。所以程序的优化也应该包含到这个方面,在你开发程序的过程中可能会有些遗漏,所以在我们进行编码规范化可读性优化是很有必要的。其实一份再好的程序代码若干年后你自己都未必能看的懂更不用说别人来看你的代码,使你自己写出的代码有更好的可读性,这个是一个好的程序员应该做的,并且是对一个团队和你自己作品的责任感。
优化方向就是使你的代码更清析更易懂。
2.程序效率、流程逻辑优化
程序效率的优化是最重要的,程序运行速度是程序代码好坏最重要的因素,程序逻辑其实就是你的解决思路,解决思路并不是唯一的,所以我们可以对它进行优化。逻辑的设计也和可读性有一定的关系,逻辑清晰可读性就更强。
优化的方向就很明确了提高速度,清晰逻辑。简单的逻辑并不代表一定是速度快,复杂的逻辑并不一定是慢的。所以在这两方面是关联。
3.SQL优化,减少查询次数
在使用数据库的程序中我们知道数据库的查询是在整个程序执行中占很大比例的,所以SQL的优化是非常重要的。
优化的方向一方面是SQL语句本身的优化,熟悉SQL的人应该会知道,不同的SQL写法执行的效率差别是很大的,如:尽量不对字段加函数操作,更多的大家可以去查找高效SQL这方面的资料。第二在一个页面中减少查询次数,这个道理很清楚,我们可以把整个页面的SQL都输出来进行分析,是否可以合并语句,是否可以做冗余字段等等,尽量减少SQL的查询次数,坚绝不在循环中使用查询。
4.缓存优化
缓存优化其实就是对上一点的补充,但缓存优化是很重要的,所以可以单独列为一点。缓存的数据主要就是从数据库中读取出来的。对缓存的一些介绍:http://www.coderhome.net/zifa/?p=195,当然缓存也应该适当,应该只把需要缓存的数据进行缓存。
5.html,css,js文件优化,减少冗余代码
这一点与服务端程序没有关系,主要是与浏览器相关的几方面。html的结构是会影响到浏览器的解析,所以好的html代码也会影响访问速度。相比之下客户端的代码就不允许有一点无用的东西存在,能把文件减少一K就应该减少。js虽然是在客户端执行但也应该去考虑它的效率问题,网络上也有这方面的文章介绍。
6.可用性优化
可用性优化主要指的是UED方面的,并不是每一个团队都有专门的UED,作为web程序的开发人员也应该有这方面的意识,去了解用户,而不是埋头写代码。努力使你开发的页面对用户更友好,更容易使用。
7.框架架构优化
如果有使用到开发框架,也应该考虑到对框架的优化,减少框架本身占用的资源。
其它:服务器架构优化、数据库优化
这些方面和程序开发没有直接关系,但和web程序的运行也是关系密切的,所以顺便提一提。

[!--infotagslink--]

相关文章

  • php语言实现redis的客户端

    php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧,希望文章对各位有帮助。 为了更好的了解redis协议,我们用php来实现...2016-11-25
  • jQuery+jRange实现滑动选取数值范围特效

    有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
  • php中登录后跳转回原来要访问的页面实例

    在很多网站用户先访问一个要登录的页面,但当时没有登录后来登录了,等待用户登录成功之后肯定希望返回到上次访问的页面,下面我就来给大家介绍登录后跳转回原来要访问的页...2016-11-25
  • JS实现的简洁纵向滑动菜单(滑动门)效果

    本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考,具体如下:这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自己修改CSS代码,这个滑动门将每一...2015-10-21
  • jQuery+slidereveal实现的面板滑动侧边展出效果

    我们借助一款jQuery插件:slidereveal.js,可以使用它控制面板左右侧滑出与隐藏等效果,项目地址:https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15
  • PHP+jQuery翻板抽奖功能实现

    翻板抽奖的实现流程:前端页面提供6个方块,用数字1-6依次表示6个不同的方块,当抽奖者点击6个方块中的某一块时,方块翻转到背面,显示抽奖中奖信息。看似简单的一个操作过程,却包含着WEB技术的很多知识面,所以本文的读者应该熟...2015-10-21
  • SQLMAP结合Meterpreter实现注入渗透返回shell

    sqlmap 是一个自动SQL 射入工具。它是可胜任执行一个广泛的数据库管理系统后端指印, 检索遥远的DBMS 数据库等,下面我们来看一个学习例子。 自己搭建一个PHP+MYSQ...2016-11-25
  • PHP实现今天是星期几的几种写法

    复制代码 代码如下: // 第一种写法 $da = date("w"); if( $da == "1" ){ echo "今天是星期一"; }else if( $da == "2" ){ echo "今天是星期二"; }else if( $da == "3" ){ echo "今天是星期三"; }else if( $da == "4"...2013-10-04
  • java后台实现js关闭本页面,父页面指定跳转或刷新操作

    这篇文章主要介绍了java后台实现js关闭本页面,父页面指定跳转或刷新操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-16
  • 原生js实现fadein 和 fadeout淡入淡出效果

    js里面设置DOM节点透明度的函数属性:filter= "alpha(opacity=" + value+ ")"(兼容ie)和opacity=value/100(兼容FF和GG)。 先来看看设置透明度的兼容性代码: 复制代码 代码如下: function setOpacity(ele, opacity) { if (...2014-06-07
  • 微信小程序 页面跳转传递值几种方法详解

    这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • Nginx根据不同浏览器语言配置页面跳转的方法

    这篇文章主要介绍了Nginx根据不同浏览器语言配置页面跳转的方法,包括一个简体繁体的基本判断方法及实际根据中英文跳转的例子,需要的朋友可以参考下...2016-05-22
  • Vue-Element-Admin集成自己的接口实现登录跳转

    关于这个Vue-element-admin中的流程可能对于新的同学不是很友好,所以本文将结合实例代码,介绍Vue-Element-Admin集成自己的接口实现登录跳转,感兴趣的小伙伴们可以参考一下...2021-06-23
  • Pycharm 跳转回之前所在页面的操作

    这篇文章主要介绍了Pycharm 跳转回之前所在页面的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-05
  • Android中用HttpClient实现Http请求通信

    本文我们需要解决的问题是如何实现Http请求来实现通信,解决Android 2.3 版本以后无法使用Http请求问题,下面请看正文。 Android开发中使用HttpClient来开发Http程序...2016-09-20
  • IE6中链接A的href为javascript协议时不在当前页面跳转

    切页面时有时用链接A来替代按钮,这样做有几个好处 鼠标放上时默认有手状效果(不用添加cursor:pointer) 可以添加低版本IE都支持的伪类 如果点击时页面要整体刷新,即跳转,这时IE6则不尽人意,如下 复制代码 代码如下: <p>...2014-06-07
  • Vue项目中实现带参跳转功能

    最近做了一个手机端系统,其中遇到了父页面需要携带参数跳转至子页面的问题,现已解决,下面分享一下实现过程,感兴趣的朋友一起看看吧...2021-04-15
  • mysql存储过程实现split示例

    复制代码 代码如下:call PROCEDURE_split('分享,代码,片段',',');select * from splittable;复制代码 代码如下:drop PROCEDURE if exists procedure_split;CREATE PROCEDURE `procedure_split`( inputstring varc...2014-05-31
  • Vue.js实战之利用vue-router实现跳转页面

    对于单页应用,官方提供了vue-router进行路由跳转的处理,这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。...2017-04-03