随笔 - 317, 文章 - 0, 评论 - 453, 阅读 - 114万
  博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

锚点的问题

Posted on   PHP-张工  阅读(2757)  评论(2编辑  收藏  举报

昨天在博客园编辑“谷歌搜索引擎优化初学者指南 (HTML版)”时,出现了一个问题!

我的<a href="#pYH1">创建独特、准确的页面标题</a>在保存后,发现变成了

<a href="http://#pYH1">创建独特、准确的页面标题</a>郁闷!

直接导致我的内部锚点连接失效!我发现只要我编辑HTML点击确定后href="#pYH1"就会自动变成href="http://#pYH1"!

后来实在没办法!我想我用脚本把http://去掉不就好了!于是有了如下代码:

1
2
3
4
5
6
7
var div = document.getElementById('divGYouHua');
var mylls = div.getElementsByTagName('a');
for(var i=0; i<mylls.length; i++){
    if(mylls[i].href.indexOf('http://#') != -1){
        mylls[i].href = mylls[i].href.substring(7);
    }

提交后就想应该好了吧!

居然没任何反应!很奇怪!难道是我的浏览器是Chrome的缘故,使用IE测试也不行!

后来把href输出发现居然是:http:/#pYH1 哦!改了代码后执行,Chrome好了,IE还不行!

发现IE的href竟然是:http:///#pYH1 岂不是要搞死我!又修改代码如下,在IE和Chrome下测试通过!

1
2
3
4
5
6
7
8
9
10
11
12
13
var div = document.getElementById('divGYouHua');
var mylls = div.getElementsByTagName('a');
for(var i=0; i<mylls.length; i++){
    if (navigator.userAgent.indexOf("MSIE")>0) {
        if(mylls[i].href.indexOf('#') != -1){
            mylls[i].href = mylls[i].href.substring(8);
        }
    } else {
        if(mylls[i].href.indexOf('http:/#') != -1){
            mylls[i].href = mylls[i].href.substring(6);
        }
    }
}

终于熬不住,一看表1点半了,睡吧!

到了今天早上我特意写了个测试程序!发现IE、Chrome、FireFox下HREF的解析都不样!测试结果如下:

IE

# [52] http://localhost:1035/WebSite1/webFold/HTMLPage.htm#
. [39] http://localhost:1035/WebSite1/webFold/
/ [22] http://localhost:1035/
../ [31] http://localhost:1035/WebSite1/
  [39] http://localhost:1035/WebSite1/webFold/
www.163.com [50] http://localhost:1035/WebSite1/webFold/www.163.com
http://www.163.com [19] http://www.163.com/
index.html?id=8#123 [58] http://localhost:1035/WebSite1/webFold/index.html?id=8#123
#abc [55] http://localhost:1035/WebSite1/webFold/HTMLPage.htm#abc
/index.html?id=8&o=123#123 [47] http://localhost:1035/index.html?id=8&o=123#123
\ [22] http://localhost:1035/
http:///#abc [12] http:///#abc
http://#abc [12] http:///#abc
http:/#abc [26] http://localhost:1035/#abc

Chrome

# [52] http://localhost:1035/WebSite1/webFold/HTMLPage.htm#
. [39] http://localhost:1035/WebSite1/webFold/
/ [22] http://localhost:1035/
../ [31] http://localhost:1035/WebSite1/
  [51] http://localhost:1035/WebSite1/webFold/HTMLPage.htm
www.163.com [50] http://localhost:1035/WebSite1/webFold/www.163.com
http://www.163.com [19] http://www.163.com/
index.html?id=8#123 [58] http://localhost:1035/WebSite1/webFold/index.html?id=8#123
#abc [55] http://localhost:1035/WebSite1/webFold/HTMLPage.htm#abc
/index.html?id=8&o=123#123 [47] http://localhost:1035/index.html?id=8&o=123#123
\ [22] http://localhost:1035/
http:///#abc [10] http:/#abc
http://#abc [10] http:/#abc
http:/#abc [26] http://localhost:1035/#abc

FireFox

# [52] http://localhost:1035/WebSite1/webFold/HTMLPage.htm#
. [39] http://localhost:1035/WebSite1/webFold/
/ [22] http://localhost:1035/
../ [31] http://localhost:1035/WebSite1/
[51] http://localhost:1035/WebSite1/webFold/HTMLPage.htm
www.163.com [50] http://localhost:1035/WebSite1/webFold/www.163.com
http://www.163.com [19] http://www.163.com/
index.html?id=8#123 [58] http://localhost:1035/WebSite1/webFold/index.html?id=8#123
#abc [55] http://localhost:1035/WebSite1/webFold/HTMLPage.htm#abc
/index.html?id=8&o=123#123 [47] http://localhost:1035/index.html?id=8&o=123#123
\ [42] http://localhost:1035/WebSite1/webFold/%5C
http:///#abc [12] http:///#abc
http://#abc [12] http:///#abc
http:/#abc [26] http://localhost:1035/#abc

分析

主要问题出在:对\http:///#abchttp://#abc的处理不同!

\ IE和Chrome都被当作/处理,而在FireFox中将\编码了!

最大的不同是http://#abchttp:///#abc IE和FireFox解析方式一样变成了:http:///#abc 三个斜杠!

而Chrome却解析成:http:/#abc 一个斜杠!

编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· DeepSeek智能编程
· 精选4款基于.NET开源、功能强大的通讯调试工具
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
点击右上角即可分享
微信分享提示