在HTML中,常见的URL有多种表示方式:
来源:随网之舞 发布时间:2009-07-28 12:18:00
在HTML中,常见的URL有多种表示方式:
相对URL: example.php demo/example.php ./example.php ../../example.php /example.php绝对URL: http://dancewithnet.com/example.php http://dancewithnet.com:80/example.php https://dancewithnet.com/example.php
同时HTML中有大量的元素属性值为URL,一般利用JavaScript获取这些URL属性值有两种方法:
<a href="example.php" id="example-a">此时页面绝对URL是http://dancewithnet.com/</a><script>var oA = document.getElementById('example-a');oA.href == 'http://dancewithnet.com/example.php';oA.getAttribute('href') == 'example.php';</script>
我们希望通过直接访问属性的方式得到完整绝对URL,通过getAttribute方法得到其原始的属性值,实际上这是一个比较理想的结果,在所有的A级浏览器中,能顺利得到这个结果的只有Firefox和IE8,其他浏览器都或多或少特殊情况,具体哪些元素的属性存在什么样的情况请看演示实例。
在大部分浏览器中存在的问题是,两种方式都返回的是原始属性值,而实际应用中往往需要的是其绝对的URL,《Dealing with unqualified HREF values》中的解决方案太过于复杂,这里提供一种相对简单的解决方案,如果不考虑区别浏览器代码会非常简单:
<form action="example.php" id="example-form">此时页面绝对URL是http://dancewithnet.com/</form><script>var oForm = document.getElementById('example-form');//IE6、IE7、Safari、Chrome、OperaoForm.action == 'example.php';oA.getAttribute('action') == 'example.php';//获取绝对URL的通用解决方案getQualifyURL(oForm,'action') == 'http://dancewithnet.com/example.php';getQualifyURL = function(oEl,sAttr){ var sUrl = oEl[sAttr], oD, bDo = false; //是否是IE8之前版本 //http://www.thespanner.co.uk/2009/01/29/detecting-browsers-javascript-hacks/ //http://msdn.microsoft.com/en-us/library/7kx09ct1%28VS.80%29.aspx /*@cc_on try{ bDo = @_jscript_version < 5.8 ?true : @false; }catch(e){ bDo = false; } @*/ //如果是Safari、Chrome和Opera if(/a/.__proto__=='//' || /source/.test((/a/.toString+'')) || /^function \(/.test([].sort)){ bDo = true; } if(bDo){ oD = document.createElement('div'); /* //DOM 操作得到的结果不会改变 var oA = document.createElement('a'); oA.href = oEl[sAttr]; oD.appendChild(oA); */ oD.innerHTML = ['<a href="',sUrl,'"></a>'].join(''); sUrl = oD.firstChild.href; } return sUrl;}</script>
在IE6和IE7这两个史前的浏览器身上还有一些更有意思的事情,两种方法在HTML元素A、AREA和IMG获取的属性值都是绝对URL,幸好微软为getAttribute提供了第二个参数可以解决这个问题,同时还可以对IFEAM和LINK元素解决前面提到的两种方法都返回原始属性的问题:
<link href="../../example.css" id="example-link"><a href="example.php" id="example-a">此时页面绝对URL是http://dancewithnet.com/</a><script>var oA = document.getElementById('example-a'), oLink = document.getElementById('example-a');oA.href == 'http://dancewithnet.com/example.php';oA.getAttribute('href') == 'http://dancewithnet.com/example.php';oA.getAttribute('href',2) == 'example.php';oLink.href == 'example.php';oLink.getAttribute('href') == 'example.php';oLink.getAttribute('href',4) == 'http://dancewithnet.com/example.php';</script>
猜你喜欢
- 连续看到几个和 Oracle 优化器隐含参数 _sort_elimination_cost_ratio 相关的优化案例(Refer Refe
- 首先看这下面的例子(鼠标移上去):<TABLE><TBODY><TR&g
- Server对象提供对服务器上访问的方法和属性.大多数方法和属性是作为实用程序的功能提供的。语法:Server.property|metho
- 本讲的内容是使用ASP的ActiveX Server Components(组件),说实话下面的内置组件我们用的很少。一、 Browser
- 在ASP中Request对象是获取客户端提交数据的一个很重要的对象,大家对他也是非常熟悉了。 虽然如此,还是经常有人问我下面的几种写法有什么
- 一般写ASP PHP代码的朋友都估计是采用直接操作SQL的吧~ 看以下的代码 <% dim conn,rs&nbs
- 我一直不很明白在中国国内流行的设计风格,象在国外的很多地方都有鲜明的设计大方向,比如韩国站点设计一般比较花哨,所以动画很多,我们常常看到韩国
- 这是网站制作很流行的下拉列表两级连动的代码,也是很多人使用的代码。下面,先来看这段代码:<%dim countset&nbs
- SQL Server有两种备份方式,一种是使用BACKUP DATABASE将数据库文件备份出去,另外一种就是直接拷贝数据库文件mdf和日志
- 在网上查找大量资料,经过自己的不懈努力,终于测试成功了。原来要在服务器上安装mysql odbc 3.51 ,还有数据库用户名及密码,用下面
- IE 开发团队更改了 IE8 的 User-agent ,更改的部分信息如下:IE8 on Windows Vista (Compatibi
- SQL Server数据库查询优化的常用方法总结:本文中,abigale代表查询字符串,ada代表数据表名,alice代表字段名。技巧一:问
- asp如何显示全部的环境变量?<%@Language="VBScript"%><%dim H
- 代码如下: 代码如下:<% '用ASP获取远程目标网页指定内容On Error Resume Next Server.Scri
- 快速掌握 Mysql数据库对文件操作的封装在查看Mysql对文件的操作中,它在不同的操作系统上对文件的操作,除了使用标准C运行库函数,包括o
- CREATE TABLE `category` ( `Id` binary(1
- hanxiaolian 为了躲避 lake2 ASP站长管理助手而写.. 一.绕过lake2 Asp木马扫描的小马 代码如下:<%&n
- 首先恭喜月影,当然希望好书大卖!原文提供了样章下载1.1M,pdf格式的。如果大家想下载可以访问源地址:http://bbs.51js.co
- 这篇论坛文章(赛迪网技术社区)根据网友的个人实践扼要的讲解了将MySQL 5.0下的数据导入到MySQL 3.23中的具体方法及步骤,详细内
- 首先,我们会document里添加mouseover事件时在HTMLElement上飘一个absolute的容器,设置border。接着,m