向JavaScript文件传递参数

通常我会有一个我想要使用的JavaScript文件，它需要在我的网页中定义某些变量

代码是这样的：

<script type="text/javascript" src="file.js"></script>
<script type="text/javascript">
   var obj1 = "somevalue";
</script>

var scriptSrc = document.getElementById("myscript").src.toLowerCase();

<script id="helper" data-name="helper" src="helper.js"></script>

var name = document.getElementById("helper").getAttribute("data-name");

然后搜索我的值

我想知道是否有其他方法可以做到这一点，而无需构建函数来解析我的字符串

---

你们都知道其他方法吗？

你们使用全局变量：-D

像这样：

<script type="text/javascript">
   var obj1 = "somevalue";
   var obj2 = "someothervalue";
</script>
<script type="text/javascript" src="file.js"></script">

---

希望这对您有所帮助。

如果您使用一些Javascript框架，如jQuery，这可以很容易地完成。 这样,

var x = $('script:first').attr('src'); //Fetch the source in the first script tag
var params = x.split('?')[1]; //Get the params

现在，您可以通过将这些参数拆分为变量参数来使用它们

---

同样的过程可以在没有任何框架的情况下完成，但需要更多的代码行。

好吧，您可以使用任何脚本语言构建javascript文件，在每次请求时将变量注入文件中。您必须告诉您的Web服务器不要静态地抛出js文件（使用mod_rewrite就足够了）

但是请注意，由于这些js文件不断更改，您会丢失它们的任何缓存

---

再见。

不，您不能通过向JS文件URL的查询字符串部分添加变量来真正做到这一点。如果编写代码部分来解析让您感到困扰的字符串，那么另一种方法可能是对变量进行json编码，并将它们放入类似于标记的rel属性的内容中？我不知道这在HTML验证方面有多有效，如果你非常担心的话。然后您只需要找到脚本的rel属性，然后对其进行json_解码

乙二醇

---

如果可能，我建议不要使用全局变量。使用名称空间和OOP将参数传递给对象

此代码属于file.js：

var MYLIBRARY = MYLIBRARY || (function(){
    var _args = {}; // private

    return {
        init : function(Args) {
            _args = Args;
            // some other initialising
        },
        helloWorld : function() {
            alert('Hello World! -' + _args[0]);
        }
    };
}());

在html文件中：

<script type="text/javascript" src="file.js"></script>
<script type="text/javascript">
   MYLIBRARY.init(["somevalue", 1, "controlId"]);
   MYLIBRARY.helloWorld();
</script>

init（[“somevalue”，1，“controlId]”）；
MYLIBRARY.helloWorld（）；

这是一个非常仓促的概念证明

我相信至少有两个地方可以改进，而且我也相信这不会在野外生存太久。欢迎提供任何反馈，使其更具外观或可用性

关键是为脚本元素设置一个id。唯一需要注意的是，这意味着您只能调用脚本一次，因为它会查找该ID以提取查询字符串。相反，如果脚本遍历所有查询元素以查看其中是否有任何元素指向它，并且如果有，则使用此类脚本元素的最后一个实例，则可以修复此问题。不管怎样，请继续使用代码：

正在调用的脚本：

window.onload=function（）{
//请注意，这两个可能的参数都是预定义的。
//如果使用正确的对象表示法，则可能不需要使用该符号
//在查询字符串中，或者如果变量在js中是可能的。
var头；
var文本；
//脚本根据页面脚本元素的ID获取src属性：
var requestURL=document.getElementById（“myScript”）.getAttribute（“src”）；
//接下来使用substring（）获取src的querystring部分
var queryString=requestURL.substring（requestURL.indexOf（“？”）+1，requestURL.length）；
//接下来将查询字符串拆分为数组
var params=queryString.split（“&”）；
//下一个通过参数的循环
对于（变量i=0；i

通过以下页面调用脚本：

查看此URL。它完全符合要求

非常感谢作者。为了快速参考，我粘贴了以下主要逻辑：

var scripts = document.getElementsByTagName('script');
var myScript = scripts[ scripts.length - 1 ];

var queryString = myScript.src.replace(/^[^\?]+\??/,'');

var params = parseQuery( queryString );

function parseQuery ( query ) {
  var Params = new Object ();
  if ( ! query ) return Params; // return empty object
  var Pairs = query.split(/[;&]/);
  for ( var i = 0; i < Pairs.length; i++ ) {
    var KeyVal = Pairs[i].split('=');
    if ( ! KeyVal || KeyVal.length != 2 ) continue;
    var key = unescape( KeyVal[0] );
    var val = unescape( KeyVal[1] );
    val = val.replace(/\+/g, ' ');
    Params[key] = val;
  }
  return Params;
}

var scripts=document.getElementsByTagName（'script'）；
var myScript=scripts[scripts.length-1]；
var queryString=myScript.src.replace（/^[^\？]+\？/，“”）；
var params=parseQuery（queryString）；
函数parseQuery（查询）{
var Params=新对象（）；
if（！query）返回参数；//返回空对象
var Pairs=query.split（/[；&]/）；
对于（变量i=0；i

很好的问题和富有创造性的答案，但我的建议是将您的方法参数化，这样可以解决所有问题，而不需要任何技巧

如果您有以下功能：

function A()
{
    var val = external_value_from_query_string_or_global_param;
}

您可以将此更改为：

function B(function_param)
{
    var val = function_param;
}

---

我认为这是最自然的方法，您不需要包装关于“文件参数”的额外文档，您也会收到相同的文档。如果您允许其他开发人员使用您的js文件，这将非常有用。

您可以使用任意属性传递参数。这适用于所有最近的浏览器

<script type="text/javascript" data-my_var_1="some_val_1" data-my_var_2="some_val_2" src="/js/somefile.js"></script>

…等等。

它不是有效的html（我不认为），但如果您在网页中为脚本标记创建自定义属性，它似乎可以工作：

然后访问javascript中的自定义属性：

var myVar=document.getElementById（“myScript”）.getAttribute（“myCustomAttribute”）

不确定这比解析脚本源字符串更好还是更差。
我遇到的另一个想法是为
元素分配
id
，并将参数作为
数据-*
属性传递。由此产生的
标记如下所示：

<script type="text/javascript" src="file.js"></script>
<script type="text/javascript">
   var obj1 = "somevalue";
</script>

var scriptSrc = document.getElementById("myscript").src.toLowerCase();

<script id="helper" data-name="helper" src="helper.js"></script>

var name = document.getElementById("helper").getAttribute("data-name");

我们得到的
name
=
helper
可能非常简单

比如说

<script src="js/myscript.js?id=123"></script>
<script>
    var queryString = $("script[src*='js/myscript.js']").attr('src').split('?')[1];
</script>

然后可以用like

console.log(json.id);

如果您需要通过CSP检查的方式（禁止取消
<script src="js/myscript.js?id=123"></script>
<script>
    var queryString = $("script[src*='js/myscript.js']").attr('src').split('?')[1];
</script>

var json = $.parseJSON('{"' 
            + queryString.replace(/&/g, '","').replace(/=/g, '":"') 
            + '"}');

console.log(json.id);

const uuidv4 = require('uuid/v4')

app.use(function (req, res, next) {
  res.locals.nonce = uuidv4()
  next()
})

app.use(csp({
  directives: {
    scriptSrc: [
      "'self'",
      (req, res) => `'nonce-${res.locals.nonce}'`  // 'nonce-614d9122-d5b0-4760-aecf-3a5d17cf0ac9'
    ]
  }
}))

app.use(function (req, res) {
  res.end(`<script nonce="${res.locals.nonce}">alert(1 + 1);</script>`)
})

<div id="account" data-email="{{user.email}}"></div>
...


$(document).ready(() => {
    globalThis.EMAIL = $('#account').data('email');
}

<script type="text/javascript" src="file.js?obj1=somevalue&obj2=someothervalue"></script>

const params = getFileParams();
console.log(params.get('obj2'));
// Prints: someothervalue

localStorage.setItem("nameOfVariable", "some text value");

localStorage.getItem("nameOfVariable");

<script src="./cttricks.js?data1=Hello&data2=World"></script>

var scripts = document.getElementsByTagName('script');
var jsFile = new URL("http://" + scripts[scripts.length-1].attributes.src.value);
/*get value from query parameters*/
console.log(jsFile.searchParams.get("data1"));
console.log(jsFile.searchParams.get("data2"));