昨天在博客园编辑“谷歌搜索引擎优化初学者指南 (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:///#abc、http://#abc的处理不同!
\ IE和Chrome都被当作/处理,而在FireFox中将\编码了!
最大的不同是http://#abc、http:///#abc IE和FireFox解析方式一样变成了:http:///#abc 三个斜杠!
而Chrome却解析成:http:/#abc 一个斜杠!
欢迎转载,转载请注明:转载自[ http://www.cnblogs.com/zjfree/ ]
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· DeepSeek智能编程
· 精选4款基于.NET开源、功能强大的通讯调试工具
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?