文章/答案/技术大牛

发布

jquery获取地址栏

jQuery本身并没有直接获取地址栏（URL）的功能，但可以通过JavaScript的原生方法来实现。以下是一些基础概念和相关信息：

基础概念

URL（Uniform Resource Locator）：统一资源定位符，用于标识互联网上的资源。
Location对象：JavaScript中的window.location对象提供了当前文档的URL信息。

获取地址栏的方法

你可以使用JavaScript的window.location对象来获取地址栏的信息。以下是一些常用的属性和方法：

window.location.href：获取完整的URL。
window.location.protocol：获取协议部分（如http: 或 https:）。
window.location.host：获取主机名和端口号。
window.location.hostname：获取主机名。
window.location.port：获取端口号。
window.location.pathname：获取路径部分。
window.location.search：获取查询字符串（包括问号）。
window.location.hash：获取哈希值（包括井号）。

示例代码

以下是一个使用jQuery和JavaScript结合的示例，展示如何获取并显示地址栏的不同部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取地址栏信息</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="urlInfo">
        <p>完整URL: <span id="fullUrl"></span></p>
        <p>协议: <span id="protocol"></span></p>
        <p>主机名: <span id="hostname"></span></p>
        <p>端口号: <span id="port"></span></p>
        <p>路径: <span id="pathname"></span></p>
        <p>查询字符串: <span id="search"></span></p>
        <p>哈希值: <span id="hash"></span></p>
    </div>

    <script>
        $(document).ready(function() {
            $('#fullUrl').text(window.location.href);
            $('#protocol').text(window.location.protocol);
            $('#hostname').text(window.location.hostname);
            $('#port').text(window.location.port);
            $('#pathname').text(window.location.pathname);
            $('#search').text(window.location.search);
            $('#hash').text(window.location.hash);
        });
    </script>
</body>
</html>

应用场景

单页应用（SPA）：在单页应用中，经常需要根据URL的变化来更新页面内容。
表单提交后的重定向：可以根据URL中的参数来决定重定向的目标页面。
动态路由：在一些复杂的Web应用中，URL的不同部分可能对应不同的功能模块。

可能遇到的问题及解决方法

跨域问题：如果你尝试从一个域名的页面获取另一个域名的URL信息，可能会遇到跨域限制。解决方法是确保所有操作都在同一个域名下进行，或者使用CORS（跨源资源共享）策略。
URL编码问题：URL中的某些字符可能需要进行编码，以避免解析错误。可以使用encodeURIComponent()函数对参数进行编码。

通过上述方法，你可以有效地获取和处理地址栏的信息，以满足不同应用场景的需求。

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

有帮助

没帮助

使用单页网站并使用URL散列和jQuery维护状态

、、

我正在处理我的投资组合，使其完全基于jQuery。所以我的问题是当你去一个页面，然后刷新，然后它会带你回到主页。实际上，我有两个问题。

浏览 3提问于2010-11-06得票数 12

回答已采纳

3回答

为jQuery/Ajax从URL (如php的$_GET)获取数据？

、、

我想要做的是获取一个URL，比如myurl.com/page.php?data1=x&data2=y&data3=z，然后获取每一段数据并在jQuery函数中使用它。为了清楚起见，当我导航到(例如，将url粘贴到地址栏中，或者通过书签转到地址栏)时，我希望jQuery对这些数据做些什么。

浏览 1提问于2010-11-03得票数 2

回答已采纳

1回答

防止超链接的默认操作不起作用

我试图使它，当这个链接被点击时，#pd不会添加到地址栏(url)，并且该链接不会试图导航到任何位置。然而，我一直在地址栏中获取#pd，尽管我没有被带到页面的顶部，这通常是我的情况。jQuery(document).ready(function($) {event.preventDefault();

浏览 3提问于2014-08-04得票数 0

回答已采纳

1回答

如何根据url中的变量显示图像

、

你可以在这里看到它的实际效果我的问题是，我知道jquery可以从url中获取变量，这就是gallerific改变图像的方式。但是，当我在地址栏中输入url 时，它应该转到图库中的图像，但它没有。有没有办法让gallerific根据地址栏中输入的url来调出图片？

浏览 2提问于2011-04-19得票数 0

回答已采纳

4回答

如何在AngularJS中禁用后退和前进导航

、

在切换页面时，地址栏会相应地更改。我检查了文档，它说AngularJs已经将$location服务与浏览器地址栏同步。我的问题是我真的想禁用我的页面中的来回。这是因为通过来回点击，我无法获取填充页面的数据。在之前的JQuery mobile中，我已经在地址栏中禁用了URL更改。通过这种方式，我基本上禁用了来回。

浏览 1提问于2014-01-21得票数 1

1回答

HTML5样板手机没有隐藏‘地址栏’移动safari

、、、、

我正在使用最新的超棒的超文本标记语言样板- 这就是应该发生的事情。但我下载了演示并开始构建我的移动应用程序，我注意到它对我来说不起作用，但我仔细地确保了一切都应该能让它起作用，但它仍然不起作用而且我的副本在加载后不会滑动地址栏-打开下面iPhone上

浏览 7提问于2011-11-16得票数 0

回答已采纳

1回答

使用jQuery替换Url中的值

、、、

这里我在浏览器的地址栏中有一个网址，我想用jQuery替换地址栏的路径。从我这方面一些尝试如下所示考虑如下url当我跑的时候它将地址栏更改为http://localhost/catID/10/ite

浏览 3提问于2013-10-23得票数 2

1回答

chrome扩展:创建新选项卡并将焦点置于页面

、、

"matches": [ "https://*/*" "js": ["jquery.jschrome.tabs.update(openedTab,{url:"https://google.com.tr"}); chrome.tabs.executeScript(ope

浏览 4提问于2017-02-12得票数 2

回答已采纳

3回答

隐藏Safari地址栏和页脚

、、

在我的jQuery移动项目中，我使用了以下代码：我正在获取Safari浏览器的地址栏和导航页脚。

浏览 0提问于2011-04-24得票数 19

回答已采纳

1回答

如何使用jquery禁用光标悬停在url地址栏上

、、

我想禁用光标悬停在url地址栏，以避免编辑url文本从地址栏。是否可以使用jQuery或JS。

浏览 0提问于2018-04-24得票数 2

7回答

从地址栏中获取页面文件名

、、

我想知道是否可以使用jquery或javascript从地址栏获取页面名称。我知道这可以用PHP来完成，但我真的不想这样做，因为它只是一个html网站。

浏览 2提问于2011-12-14得票数 29

回答已采纳

2回答

Ajax请求仅适用于相同的域。限制跨域ajax

、

我是jquery的新手，知识有限。我正在做ajax请求，以获取更多的imp信息显示到页面中，而不是重新加载页面。已经完成了。但我担心的是。任何人都可以从其他服务器调用该php文件以获取详细信息。我的问题是，如何限制其他人使用ajax或直接将文件路径放在浏览器地址栏中访问该文件？提前谢谢。

浏览 1提问于2011-12-29得票数 0

1回答

我目前使用jquery mobile 1.3.1进行开发。我遇到的问题是jquery mobile会在页面加载时自动隐藏地址栏。由于智能应用程序横幅显示为地址栏的一部分，因此用户无法看到智能应用程序横幅，除非他们向上滚动。这个问题有没有解决的办法？理想情况下，页面将加载并显示智能应用程序横幅，而不是地址栏。请参见：对我来说，这个解决方案的问题是关闭jquery mobile中的隐藏地址栏功能。我似乎不知道如何在不修改jquery移动核心代码的情况下

浏览 0提问于2013-06-26得票数 2

4回答

jQuery :在地址栏中运行脚本

、、、、

在大多数web浏览器中，您可以在地址栏中执行JavaScript (即可以在地址栏中执行jQuery吗？

浏览 4提问于2010-02-23得票数 4

回答已采纳

1回答

jQuery的scrollTop()在包括Chrome在内的安卓浏览器上表现得很奇怪

、、、

我在使用动画滚动条时遇到问题。预期的行为应该是单击导航按钮，轻松地滚动到页面末尾(并在接近末尾的地方稍作中断)。我尝试过以下方法:在scroll事件上初始化变量，我尝试过不起作用的vanilla js。需要帮助:)作为参考，如果有帮助的话

浏览 2提问于2017-05-11得票数 1

4回答

Struts2回键与链接

、、、、

我计划实现(如果已经没有好的解决方案)这样的东西：用js更改地址栏链接(添加参数)，然后我可以读取和获取适当的内容，然后用notifyTopics.发布它。还是我应该改变整个应用程序来使用jQuery插件？jQuery是否有很好的解决方案用于在ajax页面上的back按钮和链接？

浏览 1提问于2009-12-03得票数 1

3回答

使用jQuery和ajax更改浏览器地址栏URL，无需重新加载页面

、、

在不重新加载的情况下使用jQuery更改浏览器地址栏URL例如，单击更改地址栏?id=123等...

浏览 8提问于2012-08-29得票数 11

2回答

为什么浏览器的地址栏在使用AJAX时保持不变？

、、、、

每当我单击应用程序中的任何链接时，都会调用AJAX请求，并成功地在DIVs中加载内容，但地址栏保持不变。如何根据当前的主动动作更改地址栏。 jQuery('.ajax').click(function(event) { } }); }

浏览 2提问于2010-09-04得票数 2

回答已采纳

1回答

防止在移动浏览器上自动隐藏地址栏

、、

然而，在移动浏览器上，这会导致糟糕的UI，因为随着地址栏的隐藏/显示，视口高度会增加/减少(如在Chrome上)。有没有办法防止在滚动中自动隐藏地址栏？

浏览 8提问于2016-06-26得票数 3

回答已采纳

4回答

如何禁用浏览器缓存？

、、

我有一个ajax函数(在jquery中)，它可以更新html。没问题的。现在，当我点击地址栏中的回车(刷新)时，我的html不会更新(旧内容)。然而，当我做cmd + R时，我的html总是可以的。为什么我的内容会显示地址栏中的旧内容？我在jQuery中使用Chrome et load()

浏览 0提问于2012-12-28得票数 2

点击加载更多