在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>

标签:url,javascript,html,绝对URL
0
投稿

猜你喜欢

  • Python捕获异常堆栈信息的几种方法(小结)

    2022-02-19 08:01:30
  • Pytorch 如何实现常用正则化

    2022-11-02 22:15:14
  • asp无组件上传并插入到数据库里

    2008-10-24 10:04:00
  • python实现生成字符串大小写字母和数字的各种组合

    2021-02-09 07:33:00
  • 关于AJAX缓存数据

    2008-03-26 12:11:00
  • Python matplotlib实时画图案例

    2021-11-08 01:43:24
  • 深入了解vue-router原理并实现一个小demo

    2024-04-30 10:25:31
  • Python如何实现自动发送邮件

    2022-05-09 04:22:55
  • Python语音合成的项目实战(PyQt5+pyttsx3)

    2021-06-15 09:14:13
  • 使用Python实现下载网易云音乐的高清MV

    2022-08-07 17:30:52
  • Qzoneing主题视觉设计分享

    2009-07-21 18:12:00
  • MySQL UNION操作符基础知识点

    2024-01-21 10:24:31
  • 详解Python3中的迭代器和生成器及其区别

    2022-11-01 00:37:48
  • python jinja2模板的使用示例

    2023-08-11 05:12:12
  • Python装饰器详情

    2021-10-22 07:22:49
  • python动态文本进度条的实例代码

    2021-11-15 02:11:50
  • Hugo 游乐场内容初始化示例详解

    2024-05-10 13:58:13
  • python 爬取国内小说网站

    2022-11-30 16:02:04
  • Python赋值逻辑的实现

    2023-09-14 21:20:27
  • 利用WebBrowser彻底解决Web打印问题(包括后台打印)

    2024-04-27 15:17:55
  • asp之家 网络编程 m.aspxhome.com