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 相关文章推荐
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
vscode 开发Vue项目的方法步骤
Nov 25 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
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
php文件上传的简单实例
2013/10/19 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
Python管理Windows服务小脚本
2018/03/12 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
python打造爬虫代理池过程解析
2019/08/15 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
教育学习自我评价
2014/02/03 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
感恩的演讲稿
2014/05/06 职场文书
五年级上册复习计划
2015/01/19 职场文书
2015年端午节活动总结
2015/02/11 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书