在被调用的JavaScript文件中获取查询字符串

Question

在被调用的JavaScript文件中获取查询字符串

20

是否有可能像这样在被调用的JavaScript文件中使用JavaScript获取查询参数：

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

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

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

- Adam Halasz

据我所知，您必须使用服务器，但为什么不在调用JS文件之前在单独的<script>块中设置适当的JS变量呢？ - Pekka

8个回答

15

我可以使用以下代码获取src。因此，我认为您可以解析queryString。

document.currentScript.src

- Igari Takeharu

1

很好的答案，但值得注意的是IE不支持此项功能。https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript - Dave Hillier

2

哈哈，不错...我们再也不用担心IE了。 - Pavindu

7

不可能，因为脚本文件在全局javascript范围内没有表示。你只能像haitaka所示一样在DOM中找到它的元素，但这是一种非常不标准且不建议的方法来传递参数给脚本。

- Jiri Tobisek

1

是的，你可能是对的，但我想问一下，因为谁知道呢 :) - Adam Halasz

4

我知道这篇文章有些年头了，但我认为你不介意再加上我自己的看法。

如果你没有在脚本元素中添加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 {};
}

- RayLuo

2

您可以在适当的时候使用 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" ]

请记住：

当脚本通过async方式包含时，这可能无法正常工作。
使用get还是getAll？
- urlParams.get仅返回第一个值（作为字符串）
- urlParams.getAll将返回一个数组（如果只提供一个值，则大小为1）。

希望这可以帮到你。

- Fabien Snauwaert

1

我知道这已经过时了，但我想发表一下我的看法...

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

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

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

document.getElementById('query').getAttribute('value');

- jacobfogg

0

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

因此，另一个答案中的一个解决方案（不解码参数）是：

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

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

- David Spector

-3

尝试使用JavaScript获取查询值，可以像这样：

alert(window.location.href.split["?"][1].split["="][1]);

- Dineshkani

3

我理解为这个程序试图在全局文档中查找查询内容，而不是在 JavaScript 文件中查找。 - Adam Halasz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- haitaka · Accepted Answer

您可以像这样向脚本标记追加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]);
}