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 相关文章推荐
javascript function调用时的参数检测常用办法
Feb 26 Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
vue树形结构获取键值的方法示例
Jun 21 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 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
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
由document.body和document.documentElement想到的
2009/04/13 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
Python常见工厂函数用法示例
2018/03/21 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
python实现文字版扫雷
2020/04/24 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
办公室年终个人自我评价
2013/10/28 职场文书
优秀员工自荐书范文
2013/12/08 职场文书
法警的竞聘演讲稿
2014/01/02 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
中秋节感想
2015/08/10 职场文书