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读取XML文件数据并显示的实现代码
Dec 16 Javascript
JS 图片缩放效果代码
Jun 09 Javascript
CSS和Javascript简单复习资料
Jun 29 Javascript
jquery实现pager控件示例
Apr 09 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
vue-router的两种模式的区别
May 30 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
详解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 session应用实例 登录验证
2009/03/16 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
tagName的使用,留一笔
2006/06/26 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
python执行外部程序的常用方法小结
2015/03/21 Python
python实现的文件同步服务器实例
2015/06/02 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
python爬虫工具例举说明
2020/11/30 Python
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
网络管理专业求职信
2014/03/15 职场文书
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python