巧方法 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 相关文章推荐
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
JavaScript实现微信号随机切换代码
Mar 09 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
根德YB400的电路分析
2021/03/02 无线电
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
利用python实现数据分析
2017/01/11 Python
python的文件操作方法汇总
2017/11/10 Python
python合并同类型excel表格的方法
2018/04/01 Python
python实现两个文件夹的同步
2019/08/29 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
自我评价格式
2014/01/06 职场文书
论文指导教师评语
2014/04/28 职场文书
小区文明倡议书
2014/05/16 职场文书
2014年党支部承诺书
2014/05/30 职场文书
主要领导对照检查材料
2014/08/26 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
java设计模式--建造者模式详解
2021/07/21 Java/Android