16

是否可以在调用的 javascript 文件上使用 javascript 获取查询参数，如下所示：

// in html
<script src="/file.js?query=string"></script>

// in file.js
console.log(this.location.query)

这是否可能，或者我必须使用服务器？

4

8 回答 8

15

您可以将 id 属性附加到脚本标记，如下所示：

<script src="/file.js?query=string" id="query"></script>

然后调用它：

console.log(document.getElementById("query").src.split("query=")[1]);

一个小的工作示例代码如下：

<html>
<head>
<script src="aaa.js?query=abcd" id="query"></script>
</head>
<body></body>
</html>

这是 aaa.js 中的代码：

window.onload=function(){
    alert(document.getElementById("query").src.split("query=")[1]);
}
于 2013-03-05T12:36:08.467 回答
11

我可以用下面的代码得到 src 。所以我认为你可以解析queryString。

document.currentScript.src
于 2016-04-13T10:11:05.290 回答
6

不，这是不可能的，因为脚本文件在全局 javascript 范围内没有表示。您只能在 DOM 中找到它的元素，如 haitaka 所示，但这是一种非常不标准的方式，当然也不推荐将参数传递给脚本。

于 2013-03-05T12:39:16.613 回答
2

我知道这是旧的，但我认为你不会介意（再）两美分......

如果您不向脚本元素添加 id，James Smith 有一个不需要 id 属性的片段。而且这种无 id 的特性是巨大的，因为您的脚本文件不需要与调用方的 ID 相结合。

// Extract "GET" parameters from a JS include querystring
function getParams(script_name) {
  // Find all script tags
  var scripts = document.getElementsByTagName("script");
  
  // Look through them trying to find ourselves
  for(var i=0; i<scripts.length; i++) {
    if(scripts[i].src.indexOf("/" + script_name) > -1) {
      // Get an array of key=value strings of params
      var pa = scripts[i].src.split("?").pop().split("&");

      // Split each key=value into array, the construct js object
      var p = {};
      for(var j=0; j<pa.length; j++) {
        var kv = pa[j].split("=");
        p[kv[0]] = kv[1];
      }
      return p;
    }
  }
  
  // No scripts match
  return {};
}

于 2018-03-05T01:41:37.470 回答
0

我知道这是旧的，但我想我会投入我的两分钱......

如果您已经在脚本元素中添加了一个 id，为什么不也添加一个自定义属性：

<script src="/file.js" id="query" value="string"></script>

然后您可以使用 getAttribute 获取值：

document.getElementById('query').getAttribute('value');
于 2017-12-18T22:24:29.107 回答
0

您可以使用document.currentScript.src（仅在适当的时间）URLSearchParams从调用的 JavaScript 文件中提取查询字符串。

例子：

在您的 HTML 中：

<script src="querystring.js?foo=bar&foo=bar2"></script>

在您的 JavaScript 文件中：

/**
 * When this is being run, the document's last element will be this very script.
 * Explanations on http://feather.elektrum.org/book/src.html
 */
var scripts = document.getElementsByTagName('script');
var index = scripts.length - 1;
var myScript = scripts[index];
  // document.currentScript.src will be this file's URL, including its query string.
  // e.g. file:///mytests/querystring.js?foo=script

/**
 * Now just turn the query string (if any) into a URLSearchParams
to let us easily check values.
 */
var querystring = document.currentScript.src.substring( document.currentScript.src.indexOf("?") );
var urlParams = new URLSearchParams( querystring );

console.log( urlParams.getAll('foo') ); // Array [ "bar", "bar2" ]

记住：

  • 当脚本通过异步包含时，这可能不起作用。
  • 获取还是全部获取？
    • urlParams.get只会返回第一个值（作为字符串）
    • urlParams.getAll将返回一个数组（如果只提供一个值，则大小为 1。）

我希望这有帮助。

于 2020-01-20T14:50:24.387 回答
0

当 HTML 文件使用带有包含查询字符串的src属性的Script标记来加载 JavaScript 程序时，您不能使用 location.search 来检索查询字符串，因为 location 不包含 URL（与href属性一样） ）。可以使用“new URL(here.src).search”获取 URL，其中“here”是您在 Script id属性中使用的字符串。

因此，一种解决方案（来自其他地方的另一个答案，不解码参数）是

var queryDict = {};
new URL(here.src).search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})

运行此代码后，queryDict 是一个包含参数属性/值对的对象。

于 2020-09-12T21:06:07.987 回答
-3

尝试像这样使用javascript获取查询的值

alert(window.location.href.split["?"][1].split["="][1]);
于 2013-03-05T12:36:18.367 回答