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 相关文章推荐
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
JS定义类的六种方式详解
May 12 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
JavaScript前端面试组合函数
Jun 21 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的面试题集,附我的答案和分析(一)
2006/11/19 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
一个JS翻页效果
2007/07/23 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
jQuery中val()方法用法实例
2014/12/25 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
Python中获取对象信息的方法
2015/04/27 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
Python实现注册、登录小程序功能
2018/09/21 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
对python周期性定时器的示例详解
2019/02/19 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
《一株紫丁香》教学反思
2014/02/19 职场文书
竞聘演讲稿
2014/04/24 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
小学作文之描写天气
2019/08/15 职场文书
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库