巧方法 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对象的函数
Dec 22 Javascript
服务器安全设置的几个注册表设置
Jul 28 Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
JS document内容及样式操作完整示例
Jan 14 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
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
PHP源码之explode使用说明
2011/08/05 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
进一步探究Python中的正则表达式
2015/04/28 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
python 获取图片分辨率的方法
2019/01/08 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
python访问hdfs的操作
2020/06/06 Python
python实现三种随机请求头方式
2021/01/05 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
印尼网上商店:Alfacart.com
2019/03/11 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
中间件分为哪几类
2012/03/14 面试题
经贸日语毕业生自荐信
2013/11/03 职场文书
司机岗位职责
2013/11/15 职场文书
工程测量与监理专业应届生求职信
2013/11/27 职场文书
民事二审代理词
2015/05/25 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书