脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS获取当前URL和来源URL

JS实现获取当前URL和来源URL的方法

 更新时间：2016年08月24日 11:21:22   作者：onestopweb  
这篇文章主要介绍了JS实现获取当前URL和来源URL的方法,涉及javascript针对页面document属性操作的相关技巧,需要的朋友可以参考下

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

index.html：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>新建H5模板</title>
</head>
<body>
<a href="demo.html">链接</a>
</body>
</html>

demo.html：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>新建H5模板</title>
</head>
<body>
当前URL：<input type="text" style=" width:300px;" name="nowurl" id="nowurl"><br>
来源URL：<input type="text" style=" width:300px;" name="fromurl" id="fromurl">
<script>
  var nowurl = document.URL;
  var fromurl = document.referrer;
  document.getElementById('nowurl').value = nowurl;
  document.getElementById('fromurl').value = fromurl;
</script>
</body>
</html>

效果图：

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

那么：

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

说明：

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

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

您可能感兴趣的文章:

相关文章

  • 百度空间的popup效果分析

    百度空间的popup效果分析

    自从用firefox浏览器以来，就几乎养成了一个习惯，就想用WebDeveloper把一些漂亮网站的js包括css给down下来分析一下，用来学习。
    2008-10-10
  • js 颜色选择插件

    js 颜色选择插件

    本文主要介绍了js 颜色选择插件。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • js中获取一个月有多少天数的方法

    js中获取一个月有多少天数的方法

    这篇文章主要介绍了js中获取一个月有多少天的方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • 微信小程序基于ColorUI构建皮皮虾短视频去水印组件

    微信小程序基于ColorUI构建皮皮虾短视频去水印组件

    这篇文章主要介绍了微信小程序-基于ColorUI构建皮皮虾短视频去水印组件，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2020-11-11
  • js之弹出式窗口代码生成器

    js之弹出式窗口代码生成器

    js之弹出式窗口代码生成器...
    2007-06-06
  • javascript之嵌套函数使用方法

    javascript之嵌套函数使用方法

    在javascript中允许使用嵌套函数，下面是简单的例子。
    2010-03-03
  • 如何利用Typescript封装本地存储

    如何利用Typescript封装本地存储

    这篇文章主要给大家介绍了关于如何利用Typescript封装本地存储的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01
  • JS实现模态框拖拽动态效果

    JS实现模态框拖拽动态效果

    这篇文章主要为大家详细介绍了JS实现模态框拖拽动态效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • for循环 + setTimeout 结合一些示例(前端面试题）

    for循环 + setTimeout 结合一些示例(前端面试题）

    最近在学习node.js开发资料，正好碰到了for循环+settimeout的经典例子，下面小编给大家分享for循环 + setTimeout 结合一些示例代码，需要的朋友参考下吧
    2017-08-08
  • 微信小程序入门教程

    微信小程序入门教程

    本篇文章主要介绍了微信小程序入门教程，现在分享给大家，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2016-11-11

最新评论