巧方法 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事件串连执行多个处理过程的方法
Mar 09 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
js实现搜索栏效果
Nov 16 Javascript
原生小程序封装跑马灯效果
Oct 21 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 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
如何开始收听短波广播
2021/03/01 无线电
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
在Python的循环体中使用else语句的方法
2015/03/30 Python
Python isinstance函数介绍
2015/04/14 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
高分子材料个人求职信范文
2013/09/25 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
地震捐款倡议书
2014/08/29 职场文书
升学宴学生答谢词
2015/01/05 职场文书
活动主持人开场白
2015/05/28 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书