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

获取当前网页的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日

相关文章

  • 让插入到 innerHTML 中的 script 跑起来的实现代码

    首先需要了解一下,当通过 innerHTML 插入的 script 标签在页面渲染时会被认为是异步加载,因此可能会导致 script 中的内容没有被完全加载执行,而造成一些问题。为了解决这个问题,可以使用两种方法来让插入到 innerHTML 中的 script 能够正常执行。 方法一:使用 DOM API 动态创建 script 标签,避免使用 inner…

    JavaScript 2023年6月11日
    00
  • jQuery表格插件datatables用法详解

    jQuery表格插件datatables用法详解 简介 datatables是一款非常流行的jQuery表格插件,它具有高度的灵活性和扩展性,可以帮助开发者方便地生成丰富交互性的数据表格。datatables支持多种数据源和接口,可以与各种服务器端语言如PHP、Java、.Net等进行交互。datatables还拥有众多强大的扩展插件,可用于实现排序、过滤、…

    JavaScript 2023年6月10日
    00
  • 浅谈js函数的多种定义方法与区别

    下面就为您详细讲解“浅谈js函数的多种定义方法与区别”的完整攻略。 1. 函数的多种定义方法 在JavaScript中,函数有多种定义方法,常见的有函数声明、函数表达式、箭头函数、构造函数、生成器函数等。 1.1 函数声明 函数声明是定义函数的一种方式,语法如下: function functionName(parameter1, parameter2, .…

    JavaScript 2023年5月27日
    00
  • JavaScript中String.prototype用法实例

    那我就来给大家详细讲解一下“JavaScript中String.prototype用法实例”。 什么是String.prototype? String.prototype是JavaScript中String对象的原型属性,它包含了一些用于处理字符串的方法。可以理解为,String.prototype是所有字符串对象的“祖先”,它定义了所有字符串对象所共有的方…

    JavaScript 2023年5月28日
    00
  • JavaScript中定义函数的三种方法

    在JavaScript中,定义函数有三种方法,分别是函数声明、函数表达式和箭头函数。 函数声明 函数声明是最常见的定义函数的方法,格式如下: function functionName(parameters) { // 函数体 } 其中,functionName为函数的名称,parameters为函数所需的参数,函数体中包含执行的代码。例如: functio…

    JavaScript 2023年5月27日
    00
  • 前端组件化基础知识详细讲解

    前端组件化基础知识详细讲解 什么是前端组件化 前端组件化,是一种将页面拆分成多个可重用组件的开发方式。这种方式将页面抽象为一系列具有独立功能和样式的小组件,而这些组件可以在不同的页面中重复使用和组合,实现了代码的复用和模块化。 组件的基本要素 在前端组件化中,组件是构成页面的基本单位。组件有三个基本要素: HTML 结构:组件必须被封装在一个 HTML 元素…

    JavaScript 2023年6月11日
    00
  • JavaScript实现时间范围效果

    实现时间范围效果可以帮助用户快速选择日期,常用于预定、筛选等场景。下面是实现时间范围效果的完整攻略,让我们逐步来实现。 第一步:引入依赖 我们需要引入一个 JavaScript 的日期选择器库。其中,moment.js 是一个自动解析、验证、操作和显示日期和时间的库,非常常用且功能强大。 <!– 引入moment.js和相关的CSS样式表文件 –&…

    JavaScript 2023年5月27日
    00
  • JavaScript中读取和保存文件实例

    要在JavaScript中读取和保存文件,需要使用File API。File API是在Web应用程序中读取、创建和更新文件或文件的元数据的API。 读取本地文件 要读取本地文件,需要一个文件输入元素。可以使用以下代码创建文件输入元素: <input type="file" id="file-input">…

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