JS获取url链接字符串 location.href

yizhihongxing

获取当前网页的URL链接字符串是一个常见的需求,而在JavaScript中,我们可以通过location.href属性来实现。

location.href是一个字符串,包含当前页面的完整URL。你可以直接打印location.href来查看当前页面的URL。

示例一:获取当前页面的URL并显示在页面上

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>示例一</title>
  <script>
    // 获取当前页面的URL并显示在页面上
    document.write('当前页面的URL为:' + location.href);
  </script>
</head>
<body>

</body>
</html>

在该示例中,我们使用了document.write()方法将获取到的URL输出到页面上。

示例二:根据URL链接参数的不同跳转到不同的页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>示例二</title>
  <script>
    // 获取URL链接参数
    const urlParams = new URLSearchParams(window.location.search);
    // 判断参数值并跳转到不同的页面
    if (urlParams.has('name') && urlParams.has('age')) {
      const name = urlParams.get('name');
      const age = urlParams.get('age');
      if (age > 18) {
        window.location.href = 'http://adult-page.com?name=' + name;
      } else {
        window.location.href = 'http://child-page.com?name=' + name;
      }
    } else {
      alert('请正确填写参数!');
    }
  </script>
</head>
<body>

</body>
</html>

在该示例中,我们通过const urlParams = new URLSearchParams(window.location.search)获取到了当前页面的URL链接参数。接着,我们通过判断链接参数的不同,执行不同的页面跳转操作。

以上就是获取location.href的完整攻略,希望能对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS获取url链接字符串 location.href - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性

    ECMAScript 5 (也称为ES5) 是 JavaScript 的第五个版本,具有多项新特性,为Web应用程序开发增加了更多的功能和灵活性。下面是ECMAScript5的一些主要特性: 1. 严格模式 ECMAScript 5 引入了严格模式,它是一种在代码单元或整个脚本中启用更严格解析和错误处理的方式。严格模式不允许给未声明的变量赋值,不允许删除变量…

    JavaScript 2023年5月18日
    00
  • JavaScript页面实时显示当前时间实例代码

    下面是JavaScript页面实时显示当前时间的攻略。 前提要求 在编写JavaScript实时显示时间的代码之前,需要了解一些前提知识,包括: HTML基础知识和标记语言 JavaScript基础知识和语法 Date()对象详解 实时显示当前时间代码步骤 以下是实时显示当前时间的实现步骤: 在HTML文件中创建一个用于显示时间的容器,为其设置一个ID,如下…

    JavaScript 2023年5月27日
    00
  • JavaScript中极易出错的操作符运算总结

    JavaScript中极易出错的操作符运算总结 在JavaScript编程中,操作符运算是非常常见的。但是,可能会有一些操作符运算容易出错,导致程序行为不符合预期。因此,我们需要了解并避免这些错误。 1. 严格相等运算符 在JavaScript中,使用双等号==进行非严格相等判断时,会发生隐式数据类型转换,可能会导致预期之外的结果。因此,在进行相等比较时,我…

    JavaScript 2023年5月28日
    00
  • JavaScript 参数中的数组展开 [译]

    文章“JavaScript 参数中的数组展开 [译]”介绍了JavaScript的一个很有用的语法特性:展开运算符(spread operator)。在函数参数中使用展开运算符可以方便地将数组或对象中的内容“展开”成独立的元素,方便使用。本文将对这一语法进行详细讲解。 什么是展开运算符? 展开运算符用符号“…”表示,它可以将一个数组或者类数组对象中的所有…

    JavaScript 2023年5月27日
    00
  • Js判断CSS文件加载完毕的具体实现

    判断CSS文件加载完毕的主要方法是检测link元素的load和error事件,具体步骤如下: 使用JavaScript将CSS文件插入HTML页面中,以确保JavaScript能够访问其link元素。 <link rel="stylesheet" href="style.css" id="css-lin…

    JavaScript 2023年6月11日
    00
  • 11款基于Javascript的文件管理器

    我来为您讲解关于“11款基于JavaScript的文件管理器”的完整攻略。 1. 背景介绍 JavaScript是一种流行的编程语言,同时也是前端开发中不可或缺的一部分。文件管理器是一个非常重要的工具,能够帮助用户对文件进行管理,这篇攻略就是为了介绍一些基于JavaScript的文件管理器。 2. 技术细节 下面是11款基于JavaScript的文件管理器,…

    JavaScript 2023年5月27日
    00
  • js 事件对象 鼠标滚轮效果演示说明

    下面是关于“js 事件对象 鼠标滚轮效果演示说明”的完整攻略。 什么是事件对象 事件对象是处理事件的一种机制,通过事件对象可以获取事件的相关信息,包括事件类型、目标元素、鼠标坐标等。 当事件发生时,浏览器会自动生成一个事件对象,可以通过参数的方式将该事件对象传递给事件处理函数,在事件处理函数中就可以访问该事件对象。 以下是事件对象的一些常见属性: type:…

    JavaScript 2023年6月10日
    00
  • 用原生JavaScript实现jQuery的$.getJSON的解决方法

    使用原生JavaScript实现jQuery的$.getJSON需要了解Ajax技术和JSON格式数据的处理。下面是实现该功能的完整攻略: 使用原生JavaScript发送Ajax请求获取JSON数据 function getJSON(url, successCallback, errorCallback) { const xhr = new XMLHttp…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部