通过SRC属性将变量传递到JavaScript

Question

在我的HTML文件中，我使用以下代码链接了JS文件：

src="myscript.js?config=true"

我的JS能直接像这样读取此变量的值吗？

alert (config);

这行代码无法运行，FireFox错误控制台显示“config未定义”。我该如何读取通过JS文件的src属性传递的变量？是否这么简单？

- Robin Rodricks

---

传递参数到JS脚本的正确方法 - Maksim Shamihulau

Answer 1

<script>
var config=true;
</script>
<script src="myscript.js"></script>

您不能以您尝试的方式将变量传递给JS。SCRIPT标签不会创建一个Window对象（其中包含查询字符串），也不是服务器端代码。

- Itay Moav -Malimovka

---

好的替代方案，尽管它没有回答我的问题 :) - Robin Rodricks

是的：问题是“我的JS能直接像这样读取此变量的值吗？”答案是“你不能用你尝试的方式将变量传递给JS”。 - Benjol

虽然，src属性可以指向PHP（或任何其他服务器端技术）并实现此目的。 - Itay Moav -Malimovka

安全人员和CSP似乎希望我们永远不要使用内联JavaScript。 - David Spector

Answer 2

是的，你可以这样做，但你需要知道脚本中确切的文件名：

var libFileName = 'myscript.js',
    scripts = document.head.getElementsByTagName("script"), 
    i, j, src, parts, basePath, options = {};

for (i = 0; i < scripts.length; i++) {
  src = scripts[i].src;
  if (src.indexOf(libFileName) != -1) {
    parts = src.split('?');
    basePath = parts[0].replace(libFileName, '');
    if (parts[1]) {
      var opt = parts[1].split('&');
      for (j = opt.length-1; j >= 0; --j) {
        var pair = opt[j].split('=');
        options[pair[0]] = pair[1];
      }
    }
    break;
  }
}

现在您有一个“选项”变量，其中包含传递的参数。我没有测试它，我从http://code.google.com/p/canvas-text/source/browse/trunk/canvas.text.js稍微修改了一下，那里可以正常工作。

- Fabien Ménager

---

我很难想到一个现实世界的用例，这比Itay Moav的答案更有益。 - Andy E

为了使脚本更容易整合，我个人认为将一些 HTTP 参数（虽然它们并不真正是参数）传递比在另一个脚本标签中声明几个变量更容易。 - Fabien Ménager

Answer 3

您需要使用JavaScript来查找脚本的src属性并解析问号后面的变量。使用Prototype.js框架，代码看起来像这样：

var js = /myscript\.js(\?.*)?$/; // regex to match .js

var jsfile = $$('head script[src]').findAll(function(s) {
    return s.src.match(js);
}).each(function(s) {
    var path = s.src.replace(js, ''),
    includes = s.src.match(/\?.*([a-z,]*)/);
    config = (includes ? includes[1].split('=');
    alert(config[1]); // should alert "true" ??
});

我的Javascript/正则表达式技能有点生疏，但这是一个大致的想法。直接从scriptaculous.js文件中摘取！

- Barry Gallagher

Answer 4

可能您已经看到过这样的操作，但实际上JS文件在服务器端首先被PHP或其他语言进行预处理。服务器端代码将打印/回显带有变量设置的JavaScript代码。我之前见过一个脚本广告服务商这样做，这让我开始研究是否可以使用普通的JS来完成这个操作，但实际上是不行的。

- Andy E

---

这也是 JSONP（http://en.wikipedia.org/wiki/JSONP#JSONP）的工作原理。您传递一个函数的名称，服务器会在正文中回显它。 - Matthew Flaschen

实际上，由于JSONP是由服务器端语言（如PHP或ASP）处理的。 - Andy E

Answer 5

你的脚本可以定位自己的脚本节点，检查src属性并提取任何你想要的信息。

  var scripts = document.getElementsByTagName ('script');
  for (var s, i = scripts.length; i && (s = scripts[--i]);) {
    if ((s = s.getAttribute ('src')) && (s = s.match (/^(.*)myscript.js(\?\s*(.+))?\s*/))) {
      alert ("Parameter string : '" + s[3] + "'");    
      break;
    } 
  }

- HBP

---

把脚本标签赋予一个ID，然后使用document.getElementById不是更简单吗？ - Itay Moav -Malimovka

如果您是脚本和调用它的网页的作者，则返回“是”。我的代码片段来自通用库文件，我不希望其用户在指定错误时使用id并遇到后续问题。 - HBP

Answer 6

如果您像函数调用一样不使用名称传递参数，那么这将更简单。

在HTML中：

<script src="abc.js" data-args="a,b"></script>

然后，在JavaScript中：

const args=document.currentScript.dataset.args.split(',');

现在 args 包含数组 ['a','b']。

- David Spector

Answer 7

你可以用一行代码完成这个操作：

new URL($('script').filter((a, b, c) => b.src.includes('myScript.js'))[0].src).searchParams.get("config")

- Oğuzhan Türk

Answer 8

使用全局变量并不是一个非常干净或安全的解决方案，相反你可以使用data-X属性，这更加清洁和安全：

<script type="text/javascript" data-parameter_1="value_1" ... src="/js/myfile.js"></script>

你可以通过myfile.js访问数据参数，例如使用jQuery：

var parameter1 = $('script[src*="myfile.js"]').data('parameter_1');

显然，“myfile.is”和“parameter_1”必须在两个源中匹配；）

- Luca C.

Answer 9

是否应该这样做是一个公正的问题，但如果您想要这样做，http://feather.elektrum.org/book/src.html 真的展示了如何操作。假设您的浏览器在呈现脚本标签时会阻止（目前是真的，但未来可能不再是），那么所讨论的脚本始终是到该点为止页面上的最后一个脚本。

然后使用一些框架和插件，如 jQuery 和 http://plugins.jquery.com/project/parseQuery，这变得非常简单。令人惊讶的是，还没有针对此的插件。

与此有些相关的是 John Resig 的退化脚本标签，但它在外部脚本之后运行代码，而不是作为初始化的一部分：http://ejohn.org/blog/degrading-script-tags/

致谢：将参数传递给JavaScript文件，将参数传递给JavaScript文件

- Oskar Austegard