巧方法 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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
js实现有趣的倒计时效果
Jan 19 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
使用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 小乘法表实现代码
2009/07/16 PHP
PHP 替换模板变量实现步骤
2009/08/24 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
Python中文件遍历的两种方法
2014/06/16 Python
python代码制作configure文件示例
2014/07/28 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
python实现Flappy Bird源码
2018/12/24 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
机电专业毕业生推荐信
2013/11/10 职场文书
路政管理专业个人自荐信范文
2013/11/30 职场文书
农业资源与环境专业自荐信范文
2013/12/30 职场文书
投资合作协议书
2014/04/17 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
作风转变心得体会
2014/09/02 职场文书
详解MySQL中的主键与事务
2021/05/27 MySQL
代码解析React中setState同步和异步问题
2021/06/03 Javascript
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js