JavaScript获取URL汇总


Posted in Javascript onJune 08, 2015

URL即统一资源定位符 (Uniform Resource Locator, URL),完整的URL由这几个部分构成:

scheme://host:port/path?query#fragment
scheme:通信协议,常用的http,ftp,maito等。
host:主机,服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port:端口号,整数,可选,省略时使用方案的默认端口,如http的默认端口为80。
path:路径,由零或多个"/"符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。
query:查询,可选,用于给动态网页(如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页)传递参数,可有多个参数,用"&"符号隔开,每个参数的名和值用"="符号隔开。
fragment:信息片断,字符串,用于指定网络资源中的片断。例如一个网页中有多个名词解释,可使用fragment直接定位到某一名词解释。(也称为锚点)

下面我们举例一个URL,然后获得它的各个组成部分。
https://3water.com/newsDetail.php?id=65

window.location.href

可以获得整个URL字符串(在浏览器中就是完整的地址栏)。

var test = window.location.href;
alert(test);

程序返回 https://3water.com/newsDetail.php?id=65

window.location.protocol

可以获得 URL 的协议部分

var test = window.location.protocol;
alert(test);

程序返回 http:

window.location.host

可以获得 URL 的主机部分

var test = window.location.host;
alert(test);

程序返回 3water.com

window.location.port
可以获得 URL 的端口部分

var test = window.location.port;
alert(test);

如果采用默认的80端口(update:即使添加了:80),那么返回值并不是默认的80而是空字符。

window.location.pathname
获得 URL 的路径部分(就是文件地址)

var test = window.location.pathname;
alert(test);

window.location.search
获得查询(参数)部分,除了给动态语言赋值以外,我们同样可以给静态页面,并使用javascript来获得相信应的参数值。

var test = window.location.search;
alert(test);

window.location.hash

获得锚点。

var test = window.location.hash;
alert(test);

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
基于JavaScript获取url参数2种方法
Apr 17 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
详解JavaScript中的forEach()方法的使用
Jun 08 #Javascript
详解JavaScript中的every()方法
Jun 08 #Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 #Javascript
javaScript中with函数用法实例分析
Jun 08 #Javascript
简介JavaScript中的sub()方法的使用
Jun 08 #Javascript
简介JavaScript中strike()方法的使用
Jun 08 #Javascript
JavaScript中的small()方法使用详解
Jun 08 #Javascript
You might like
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python实现文本去重且不打乱原本顺序
2016/01/26 Python
python实现周期方波信号频谱图
2018/07/21 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
python 实现两个线程交替执行
2020/05/02 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
phpquery中文手册
2021/03/18 PHP
zooplus波兰:在线宠物店
2019/07/21 全球购物
《故都的秋》教学反思
2014/04/15 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
材料员岗位职责
2015/02/10 职场文书
龙猫观后感
2015/06/09 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python
在python中读取和写入CSV文件详情
2022/06/28 Python