巧方法 JavaScript获取超链接的绝对URL地址


Posted in Javascript onJune 14, 2016

对于Web程序员来说,处理简单的URL格式也许会成为一场噩梦。试想一下,一个网址里有很多组成部分都会影响你对它的解析方法:

····是否以/字符开头
····是否以//开头
····是否以?号开头
····是否以#号开头
…等等
当你想要这个地址的绝对地址时,如何判断处理和解析?它有可能是http协议的,还可能是https协议的。够头痛吧。幸运的是,我们有个简单的方法来确定它的绝对地址,就是创建一个A元素来辅助完成这个任务!

JavaScript代码

这里我将使用一个返回函数的JavaScript函数,这样做有很多好处,下面会讲。

var getAbsoluteUrl = (function() {
 var a;

 return function(url) {
 if(!a) a = document.createElement('a');
 a.href = url;

 return a.href;
 };
})();

这个函数看起来有些复杂,它先将一个函数赋予一个变量,而这个函数里有另外一个函数,还有一个预先定义的变量。有人可能会问,为什么要内嵌一个函数,是否可以简化成这样:

var getAbsoluteUrl = function(url) {
 var a = document.createElement('a');
 a.href=url;
 return a.href;
}

当然这种简单的写法也不能算错,但不够完美,因为内嵌一个函数的做法虽然增加了代码的复杂度,但它能保证A元素只被创建一次,而且可以重复利用,这样节省了时间和内存。

也许有人会提出另外一个问题,疑惑嵌套的第二个函数里有个if判断,为什么需要它,干嘛不写成下面这样:

var getAbsoluteUrl = (function() {
 var a = document.createElement('a');

 return function(url) {
 a.href = url;

 return a.href;
 };
})();

这自然也是一种可以运行的写法,而且功能不会有任何错误。但微妙的是,如果没有if判断语句,在定义这个函数的时候,即使这个函数没有被任何代码调用,A元素也会被初始化,而有了if判断语句,A元素会在被实际用到时才被创建,不会浪费内存和CPU。

好了,有了这个方法,不论你传入它的是什么样的URL地址,它都会返回绝对地址。

大家试一下吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之对系统的toFixed()方法的修正
May 08 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
javascript防抖函数debounce详解
Jun 11 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 #Javascript
返回函数的JavaScript函数
Jun 14 #Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 #Javascript
Web程序员必备的7个JavaScript函数
Jun 14 #Javascript
Javascript中的迭代、归并方法详解
Jun 14 #Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 #Javascript
jQuery处理XML文件的几种方法
Jun 14 #Javascript
You might like
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
从Python的源码来解析Python下的freeblock
2015/05/11 Python
Python常见工厂函数用法示例
2018/03/21 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
工地门卫岗位职责
2013/12/30 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
美术课外活动总结
2014/07/08 职场文书
民事授权委托书范文
2014/08/02 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
公司授权委托书范文
2014/09/21 职场文书
学生检讨书怎么写
2014/10/09 职场文书
入党函调证明材料
2014/12/24 职场文书
医学会议开幕词
2016/03/03 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python