jq 获取引入页面url_JS实现获取当前URL和来源URL的方法

本文介绍了如何使用JavaScript获取页面的当前URL(document.URL)和来源URL(document.referrer),并提供了代码示例和实际效果。这对于前端开发者理解浏览器行为和处理链接跳转很有帮助。
摘要由CSDN通过智能技术生成

本文实例讲述了JS实现获取当前URL和来源URL的方法。分享给大家供大家参考,具体如下:

index.html:

新建H5模板

链接

demo.html:

新建H5模板

当前URL:

来源URL:

var nowurl = document.URL;

var fromurl = document.referrer;

document.getElementById('nowurl').value = nowurl;

document.getElementById('fromurl').value = fromurl;

效果图:

假设是通过 https://www.jb51.net/index.html 进来

06ae3cf18887f13b079f8d0c7880340f.png

那么:

获取当前的URL是:https://www.jb51.net/demo.html

获取来源的URL是:https://www.jb51.net/index.html

2a7ea5a51e13cb8eb50147d4bc9ab2a4.png

说明:

document.URL 属性可返回当前文档的 URL。

document.referrer 属性可返回载入当前文档的文档的 URL。

希望本文所述对大家JavaScript程序设计有所帮助。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以帮你写一个简单的示例代码。首先需要引入Bootstrap 4和jQuery的CDN链接,如下所示: ```html <!-- Bootstrap 4 CSS --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> <!-- jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- Bootstrap 4 JS --> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> ``` 接下来,我们可以使用jQuery编写一个函数来获取当前环境,代码如下所示: ```javascript function getEnvironment() { var environment = 'production'; // 假设当前环境为生产环境 // 在这里根据实际情况获取当前环境,比如从URL参数或者localStorage中获取 // 如果当前环境是开发环境,则将environment设置为'development' return environment; } ``` 在上面的代码中,我们定义了一个函数`getEnvironment()`,该函数返回当前环境的名称。在这里,我们假设当前环境为生产环境,并将其赋值给变量`environment`。你可以根据实际情况修改这里的代码,比如从URL参数或者localStorage中获取当前环境。 如果你想在页面加载时显示当前环境,可以在页面中添加一个元素,并在页面加载完成后调用`getEnvironment()`函数来获取当前环境,并将其显示在页面上,代码如下所示: ```html <div id="environment"></div> ``` ```javascript $(function() { var environment = getEnvironment(); // 获取当前环境 $('#environment').text('当前环境:' + environment); // 将当前环境显示在页面上 }); ``` 在上面的代码中,我们在页面加载完成后调用`getEnvironment()`函数来获取当前环境,并将其显示在页面上。 希望这个简单的示例代码可以帮到你,如果有其他问题,欢迎继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值