从地址栏中取传递的参数

JS参数解析
本文介绍了一段JavaScript代码如何从URL中解析参数并打开新窗口的方法。具体实现方式为:通过location.href获取当前页面URL,利用indexOf和substring方法找到并截取参数部分,再使用split将参数字符串拆分为数组进行遍历,最终提取出特定参数如'CompanyID'的值,并用该值打开一个新窗口。

<%--<script type="text/javascript">
  var sWidth = 0;
  var url = location.href;
  if (url.indexOf("?") > 0) {
        var paraObj = url.substring(url.indexOf("?") + 1).split("&");
        for (var i = 0; i < paraObj.length; i++) {
            var paraString = paraObj[i];
            var paraName = paraString.substring(0, paraString.indexOf("="));
            if (paraName == 'CompanyID') {
                sWidth = paraString.substring(paraString.indexOf("=") + 1);
            }
        }
    }
   var ID= sWidth;
     window.open ('测试5.aspx?CompanyID='+ID, '_blank', 'height=700, width=800, top=0, left=0,location=no, toolbar=no, menubar=no, scrollbars=no, resizable=no, status=no');

  </script>--%>

在前端开发中,HTML 页面本身不具备直接获地址栏数据的能力,但可以通过 JavaScript 来实现这一功能。URL 参数通常以 `?key=value` 的形式出现在地址栏中,例如 `b.html?id=12&name=zhufeng#peixun`,其中 `id` 和 `name` 是参数名,`12` 和 `zhufeng` 是对应的值[^1]。 为了从 URL 中提这些参数,可以使用 `window.location.search` 属性来获查询字符串部分,结合正则表达式或 `URLSearchParams` 接口进行解析。 ### 使用 `URLSearchParams` 获参数 `URLSearchParams` 是现代浏览器提供的一种标准方法,用于解析 URL 查询参数。以下是一个示例代码: ```javascript // 获当前页面的查询字符串 const queryString = window.location.search; // 使用 URLSearchParams 解析查询字符串 const urlParams = new URLSearchParams(queryString); // 获特定参数的值 const id = urlParams.get('id'); const name = urlParams.get('name'); console.log(`ID: ${id}, Name: ${name}`); ``` 如果地址栏是 `b.html?id=12&name=zhufeng#peixun`,上述代码将输出: ``` ID: 12, Name: zhufeng ``` ### 使用正则表达式获参数 对于需要兼容旧浏览器的场景,可以使用正则表达式手动提参数值。以下是一个基于正则表达式的实现: ```javascript function getParameterByName(name, url = window.location.href) { name = name.replace(/[\[\]]/g, '\\$&'); // 转义特殊字符 const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`); const results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, ' ')); } const id = getParameterByName('id'); const name = getParameterByName('name'); console.log(`ID: ${id}, Name: ${name}`); ``` 同样,当 URL 为 `b.html?id=12&name=zhufeng#peixun` 时,该代码也将正确输出: ``` ID: 12, Name: zhufeng ``` ### 在 React 应用中获 URL 参数 在 React 项目中,尤其是使用 `react-router` 的情况下,可以通过 `this.props.match.params` 或 `useParams()` 钩子函数来获路径中的参数。此外,还可以通过 `location.search` 获查询参数,其方式与普通 HTML 页面类似: ```javascript import { useLocation } from 'react-router-dom'; function DetailPage() { const location = useLocation(); const searchParams = new URLSearchParams(location.search); const id = searchParams.get('id'); const name = searchParams.get('name'); return ( <div> <p>ID: {id}</p> <p>Name: {name}</p> </div> ); } ``` 这种方式适用于通过 `history.pushState` 等方法传递的状态信息,也可以从 URL 查询字符串中提参数值[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值