开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

通过JavaScript检查当前页面的URl

基础概念

URL（Uniform Resource Locator）是统一资源定位符，用于标识互联网上的资源。每个网页都有一个唯一的URL，浏览器通过这个URL来访问和加载网页内容。

相关优势

唯一性：每个URL都是唯一的，可以准确地定位到互联网上的一个资源。
可读性：URL通常易于理解和记忆，方便用户分享和访问。
灵活性：URL可以指向任何类型的资源，包括网页、图片、视频、文档等。

类型

绝对URL：包含协议（如http或https）、主机名、路径和文件名，可以独立定位资源。
相对URL：相对于当前页面的URL，不包含协议和主机名，需要结合当前页面的URL来解析。

应用场景

页面跳转：通过JavaScript改变浏览器的URL，实现页面跳转。
资源加载：通过URL加载外部资源，如图片、脚本、样式表等。
状态管理：通过URL的hash部分（如#section1）来管理页面状态。

检查当前页面的URL

在JavaScript中，可以通过window.location对象来获取当前页面的URL。以下是一些常用的属性和方法：

window.location.href：获取完整的URL。
window.location.protocol：获取URL的协议部分（如http:或https:）。
window.location.host：获取URL的主机名和端口号（如www.example.com:8080）。
window.location.hostname：获取URL的主机名（如www.example.com）。
window.location.pathname：获取URL的路径部分（如/path/to/page）。
window.location.search：获取URL的查询字符串部分（如?key=value）。
window.location.hash：获取URL的hash部分（如#section1）。

示例代码

// 获取完整的URL
console.log("完整的URL: " + window.location.href);

// 获取协议
console.log("协议: " + window.location.protocol);

// 获取主机名和端口号
console.log("主机名和端口号: " + window.location.host);

// 获取主机名
console.log("主机名: " + window.location.hostname);

// 获取路径
console.log("路径: " + window.location.pathname);

// 获取查询字符串
console.log("查询字符串: " + window.location.search);

// 获取hash
console.log("hash: " + window.location.hash);

参考链接

MDN Web Docs: window.location

常见问题及解决方法

问题：为什么`window.location.href`返回的URL是空的？

原因：

页面尚未完全加载。
脚本在<head>标签中执行，而不是在<body>标签底部。

解决方法：

将脚本放在<body>标签底部，确保页面完全加载后再执行脚本。
使用window.onload事件或DOMContentLoaded事件来确保页面加载完成后再获取URL。

window.onload = function() {
    console.log("完整的URL: " + window.location.href);
};

或者

document.addEventListener("DOMContentLoaded", function() {
    console.log("完整的URL: " + window.location.href);
});

通过以上方法，可以确保在页面完全加载后获取到正确的URL。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Bookmarklet编写指南

前一段日子，我写了两个Bookmarklet----"短网址生成"和"短网址还原"。它们用起来很方便，除了我本人之外，其他朋友也在用。第一次发布Bookmarklet，就能有用户，我挺满意的。下面

09

理解JavaScript中的window对象

每个JavaScript环境都有一个全局对象（global object）。在全局范围内创建的任何变量实际上都是这个对象的属性，而任何函数都是它的方法。在浏览器环境中，全局对象是window对象，它代表了包含网页的浏览器窗口。

02

js刷新当前页面方法

在写JS代码时，用到JS来刷新当前页面的方法有几种，比如最常用的reload()，location 等

02

九、知识拓展

1、<a href="javascript:js_method();></a>"`

02

微信公众号复制的图片可以正常显示的办法

通过浏览多方文章,找到了一个非常好用但是也有很大的坑的办法: 在页面中加meta: <meta name="referrer" content="never"> 亲测遇到的坑: 首先,微信复制的图片,自己网站作为引用,在pc端任何地方都显示:"本图片来自微信公众号,未经许可,不能引用..."之类的字样在安卓ap端其实是可以正常显示的,在ios的app端显示为空白当加了该meta之后,在pc所有地方都可以正常显示了,但是ios的app端依然显示为空白......所以使用该方法如果仅限于在pc端的话,,没毛

09

窥探现代浏览器架构(二)

本文是笔者对Mario Kosaka写的inside look at modern web browser系列文章的翻译。这里的翻译不是指直译，而是结合个人的理解将作者想表达的意思表达出来，而且会尽量补充一些相关的内容来帮助大家更好地理解。

01

js刷新页面

如何实现刷新当前页面呢？借助js你将无所不能。 1，reload 方法，该方法强迫浏览器刷新当前页面。语法：location.reload([bForceGet]) 参数： bForceGet，可选参数，默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新") 2，replace 方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替

05

JavaScript Window - 浏览器对象模型浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。浏览器对象模型（Browser Object Model）1 Wi

尚无正式标准。由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

02

现代浏览器内部机制 Part 2 | 导航这件小事

本文是这个系列的第二篇文章，会深入到 Chrome 的内部工作。在上一篇文章中，我们了解了线程和进程在浏览器中的不同，而在这篇文章中，我们会更加深入的了解当浏览器为用户呈现一个页面时，这些进程和线程之间是如何通信的。

03

JavaScript中window.open（）和Window Location href的区别

URL 可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口

05

你能用 JavaScript 访问历史记录吗？

使用JavaScript通过window.history对象来访问和操作浏览器的历史记录。window.history对象提供了一些方法和属性，跟踪浏览历史、导航到不同的页面以及对历史记录进行修改。

05

【JavaScript】获取当前页的URL与window.location.href

利用Javascript获取当前页的URL，这个问题起来好像很复杂，如果第一次去想这个问题，很多人估计又在琢磨到底又是哪个神一般的Javascript函数。

03

Python网络数据抓取（7）：Selenium 模拟

Selenium 是一个用于测试网页和网络应用的框架。它兼容多种编程语言，并且除了 Chrome 浏览器之外，还能得到其他多种浏览器的支持。Selenium 提供了应用程序编程接口（API），以便与你的浏览器驱动程序进行交互。

00

js实现页面刷新

reload 方法，该方法强迫浏览器刷新当前页面。语法：location.reload([bForceGet]) 参数： bForceGet，可选参数，默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新")

04

JavaScript 允许自定义对象分析

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数... 此外，JavaScript 允许自定义对象。 JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型。

00

Web前端学习第3章 JavaScript基础教程18 BOM概述

《javaScript高级程序设计》这本书讲过: javaScript = ECMAScript + DOM + BOM。

02

JavaScript刷新页面的几种方法

参数： bForceGet，可选参数，默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”)

03

JavaScript中window.open（）和Window Location href的区别「建议收藏」

specs 可选。一个逗号分隔的项目列表。支持以下值： channelmode=yes|no|1|0 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器 directories=yes|no|1|0 是否添加目录按钮。默认是肯定的。仅限IE浏览器 fullscreen=yes|no|1|0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器 height=pixels 窗口的高度。最小.值为100 left=pixels 该窗口的左侧位置 location=yes|no|1|0 是否显示地址字段.默认值是yes menubar=yes|no|1|0 是否显示菜单栏.默认值是yes resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes status=yes|no|1|0 是否要添加一个状态栏.默认值是yes titlebar=yes|no|1|0 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes top=pixels 窗口顶部的位置.仅限IE浏览器 width=pixels 窗口的宽度.最小.值为100 replace Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

02

浏览器中的JavaScript核心BOM（浏览器对象模型）重点掌握对象之Location对象的属性与方法

在学过JavaScript之后，我们都知道对象分为内置对象、宿主对象、自定义对象，我们经常用到的浏览器中的内置对象就是宿主对象的一种，浏览器的内置对象有很多，本文就来详细讲解一下Location对象的属性与方法吧。

01

JSP 防止网页刷新重复提交数据

if session("ok")=true then response.write "错误，正在提交" response.end end if

02

移动搜索SEO：网站移动适配之Meta标注、移动跳转终结篇

这些天，在给博客的标签页(tag)添加跳转和 META 动态申明时，居然让我醍醐灌顶，发现之前的动态适配的做法是多么的苦逼和小白！总结前，先来回顾下小白张戈在移动适配这条道路上的摸爬滚打：百度开放适配专用 sitemap 制作说明 360 站长平台移动适配文件制作说明完美实现移动主题在 360 网站卫士缓存全开情况下的切换移动搜索 SEO 分享：利用 Meta 声明来做百度开放适配利用 Meta 申明来做百度、谷歌、雅虎、微软等搜索的开放适配必须申明的是，本文的所有做法仅适合非响应式网站，并且需

06

JS刷新当前页面的方法总结

该方法强迫浏览器刷新当前页面。语法：location.reload([bForceGet]) 参数： bForceGet，可选参数，默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”)

03

JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】

BOM 是浏览器对象模型的简称。JavaScript 将整个浏览器窗口按照实现的功能不同拆分成若干个对象

01

H5 img标签图片无法显示 -- 解决方案

使用Referer Meta标签控制referer，在H5 的 header加入meta

02

浏览器中的JavaScript核心BOM（浏览器对象模型）

在学过JavaScript之后，我们都知道对象分为内置对象、宿主对象、自定义对象，我们经常用到的浏览器中的内置对象就是宿主对象的一种，浏览器的内置对象有很多，本文就来详细讲解一下History对象的属性与方法吧。

01

数据埋点好帮手，这个Beacon API ，建议每位前端开发者了解下

Beacon API是HTML5提供的新型浏览器API，可以在不影响当前页面加载和性能的情况下，在浏览器后台异步发送数据。借助Beacon API，开发人员可以在页面卸载或关闭时向服务器发送数据，从而实现一些监控和日志记录功能。

03

Linux系统之links和elinks命令的基本使用

links和elinks都是Linux系统下的命令行浏览器，主要用于在终端中查看网页内容。它们的区别在于：

02

HTML 面试要点：History 和 Hash 路由方式

越来越多的应用使用 Ajax 请求数据，浏览器 URL 不会发生任何变化。同时，浏览的页面内容在用户下次使用 URL 访问时将无法重新呈现，使用路由可以很好地解决这个问题。

02

JavaScript强化教程——Window Location

本文为 H5EDU 机构官方 HTML5培训教程，主要介绍：JavaScript强化教程 ——

01

【JavaScript 教程】浏览器—History 对象

window.history属性指向 History 对象，它表示当前窗口的浏览历史。

01

Web安全学习笔记(六)：JavaScript基础

这两天都没整理笔记，原因多半在于我不知道该怎么整理关于编程语言的笔记，这方面薄弱。所以想了想，决定就将一些基本的整理进来，这其中不包括语法的使用，我所谓的基本，而是JavaScript在web中充当的角色，以及JavaScript的一些基本工作。

01

History对象

History对象 History对象允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。属性 history.length: 只读，返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页，例如在一个新的选项卡加载的一个页面中，这个属性返回1。 history.scrollRestoration: 允许Web应用程序在历史导航上显式地设置默认滚动恢复行为，此属性可以是自动的auto或者手动的manual。 history.state 只读，返回一个表示历史堆栈顶部的状态的值，这是一种可以不必

03

iframe实现页面局部刷新原理解析

web开发实现页面的局部刷新的技术，除了比较常见的ajax，还有通过iframe来实现，这种方式和ajax有什么不同呢首先看一个用ajax技术实现的页面局部刷新的效果——表单登陆。情况1.不输入用户名，登陆失败。情况2.输入用户名，密码正确，登陆成功。上面的效果实现起来很简单，无非就是给按钮绑定点击事件，事件里发送一个ajax请求，请求完成后，回调函数根据返回结果，再操作dom元素。那同样的表单登陆，用iframe如何实现呢？先看前端页面的代码： <!DOCTYPE html> <html l

03

【XSS漏洞】XSS漏洞相关总结v1.0

通常指攻击者通过“HTML注入”篡改网页，插入恶意脚本，从而在用户浏览网页时，控制用户浏览器的一种攻击手段。

03

JavaScript强化教程——Window Location

本文为 H5EDU 机构官方 HTML5培训教程，主要介绍：JavaScript强化教程 —— 对象在编写时可不使用 window这个前缀。一些例子：location.hostname 返回 web 主机的域名 location.pathname 返回当前页面的路径和文件名 location.port 返回 web 主机的端口（80 或 443） location.protocol 返回所使用的 web 协议（http:// 或 https://） Href location.href 属性返回当前页面的 URL。实例返回（当前页面的）整个 URL：http://www.w3school.com.cn/js/ ... indow Location Pathname location.pathname 属性返回 URL 的路径名。实例返回当前 URL 的路径名：/js/js_.asp Assign location.assign() 方法加载新的文档。实例加载一个新的文档：<html> <head> [removed] function newDoc() { .assign("http://www.w3school.com.cn";) } [removed] </head> <body> <input type="button" value="加载新文档"> </body> </html>

09

指定 WordPress 页面按需加载 JavaScript

在 wordpress 主题或插件中加载 JavaScript 时，官方推荐的方法是使用 wp_enqueue_script() 来加载，该函数可以指定 JavaScript 的依赖库，指定 JavaScript 文件的版本，设置在页面头部或者底部加载，非常灵活和方便。但是，该插件缺少指定在某些页面加载 JavaScript 的设置参数。所幸的是，我们可以通过 WordPress 的函数自己动手来实现这个功能。

01

JavaScript基础-BOM与窗口交互

BOM（Browser Object Model，浏览器对象模型）是JavaScript用于与浏览器窗口进行交互的一套API。它提供了对浏览器窗口、框架、导航历史、位置、对话框等对象的操作能力，是前端开发不可或缺的一部分。本文旨在深入浅出地介绍BOM的基本概念、关键对象及其方法，并探讨在使用BOM进行窗口交互时的常见问题、易错点及避免策略，辅以实用代码示例，帮助开发者更好地掌握这一重要领域。

01

一篇文章带你了解JavaScript window location

window是DOM的核心对象，表示浏览器的一个实例。在浏览器中，window对象有双重角色，它是通过JS访问浏览器窗口的一个接口，也是Global对象(参考百度)。

01

H5页面测试总结

在最近几个项目中，小编接触了较多关于H5页面的测试，H5页面的测试除了业务逻辑功能测试外，其他部分的测试方法基本是可以通用的，在此对H5页面的一些通用测试方法进行总结分享给大家。

02

H5页面测试总结

前言在最近几个项目中，小编接触了较多关于H5页面的测试，H5页面的测试除了业务逻辑功能测试外，其他部分的测试方法基本是可以通用的，在此对H5页面的一些通用测试方法进行总结分享给大家。 H5页面介绍 1. H5页面 H5即 HTML5，是最新的 Web 端开发语言版本，大多数手机 APP 页面会用 H5 实现，包括 PC Web 站点也会用它开发实现。所以 Web 的通用测试点和方法基本都可以适用于它。H5其实就是：移动端Web页面。 H5应用在很多地方，如APP的活动专题页面、新闻页面、微信公众号文章

02

H5页面测试总结|干货

前言在最近几个项目中，小编接触了较多关于H5页面的测试，H5页面的测试除了业务逻辑功能测试外，其他部分的测试方法基本是可以通用的，在此对H5页面的一些通用测试方法进行总结分享给大家。 H5页面介绍

02

window.location.href的用法

self.location.href=“/url” 当前页面打开URL页面 location.href=“/url” 当前页面打开URL页面 window.location.href=“/url” 当前页面打开URL页面，前面三个用法相同。 this.location.href=“/url” 当前页面打开URL页面 parent.location.href=“/url” 在父页面打开新页面 top.location.href=“/url” 在顶层页面打开新页面

02

javascript中遇到的字符串对象处理

在javascript中对参数处理： 1 <script> 2 function getParam() 3 { 4 urlInfo=window.location.href; //获取当前页面

javascript refresh page 几种页面刷新的方法[通俗易懂]

下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。 frame.html 由上(top.html)下(bottom.html)两个页面组成，代码如下：

03

Web安全之跨站脚本攻击（XSS）

跨站脚本攻击，英文全称是 Cross Site Script，本来缩写是CSS，但是为了和层叠样式表（Cascading Style Sheet，CSS）有所区别，所以在安全领域叫做“XSS”。

02

XSS漏洞总结

同源策略影响源的因素：host,子域名,端口,协议 a.com通过以下代码:

03

使用百度统计跟踪和分析 WordPress 404 页面

我们知道正确处理 404 页面是 SEO 链接建设中非常重要的一环，我们需要分析网站上的 404 页面有哪些，哪里来的？然后改正这些 404 页面，使用 301 重定向把流量导到正确的页面上去。

01

如何在低代码平台中引用 JavaScript ？

在当今快速发展的数字化时代，企业对业务应用的需求日益复杂且多元。低代码开发平台作为一个创新的解决方案，以直观易用的设计理念，打破了传统的编程壁垒，让非技术人员也能轻松构建功能完备的Web应用程序，无需深入编码。这一特性极大地简化了应用开发流程，加速了业务需求转化为实际应用的速度，为企业带来了前所未有的效率提升和业务灵活性。

01

秒杀系统设计：你的系统可以应对万人抢购盛况吗？

秒杀是电子商务应用常见的一种营销手段：将少量商品（常常只有一件）以极低的价格，在特定的时间点出售。比如，周日晚上 8 点整，开售 1 部 1 元钱的手机。因为商品价格诱人，而且数量有限，所以用户趋之若鹜，在秒杀活动开始前涌入系统，等到秒杀活动开始的一瞬间，点下购买按钮（在此之前购买按钮为灰色，不可以点击），抢购商品。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭