blocks|key|1340021|text|如果你使用的是像jQuery这样的Javascript框架，这很容易做到。就像这样，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1340022|var+x+=+$('script:first').attr('src');+//Fetch+the+source+in+the+first+script+tag
var+params+=+x.split('?')[1];+//Get+the+params|code-block|syntax|javascript|1340023|现在，您可以通过拆分将这些参数用作变量参数。|1340024|同样的过程可以在没有任何框架的情况下完成，但需要更多的代码行。|1340025|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>This can be easily done if you are using some Javascript framework like jQuery. 
Like so,</p>

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

<p>Now you can use these params by splitting as your variable parameters.</p>

<p>The same process can be done without any framework but will take some more lines of code.</p>


blocks|key|1125086|text|你可以使用任何脚本语言来构建javascript文件，并在每次请求时将变量注入到文件中。您必须告诉您的out服务器不要静态地分发js文件(使用mod_rewrite就足够了)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1125087|但是请注意，您会丢失这些js文件的任何缓存，因为它们经常被更改。|1125088|再见。|1125089|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>Well, you could have the javascript file being built by any of the scripting languages, injecting your variables into the file on every request. You would have to tell your webserver to not dish out js-files statically (using mod_rewrite would suffice).</p>

<p>Be aware though that you lose any caching of these js-files as they are altered constantly.</p>

<p>Bye.</p>


blocks|key|1125131|text|不，您不能通过向JS文件URL的querystring部分添加变量来做到这一点。如果正在编写解析令您困扰的字符串的代码部分，也许另一种方法是对变量进行json编码，并将它们放入类似于标记的rel属性的内容中？我不知道这在HTML验证方面有多有效，如果这是你非常担心的事情。然后，您只需要找到脚本的rel属性，然后对其执行json_decode。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1125132|例如|1125133|<script+type='text/javascript'+src='file.js'+rel='{"myvar":"somevalue","anothervar":"anothervalue"}'></script>|code-block|syntax|javascript|1125134|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>No, you cant really do this by adding variables to the querystring portion of the JS file URL. If its writing the portion of code to parse the string that bothers you, perhaps another way would be to json encode your variables and put them in something like the rel attribute of the  tag? I don't know how valid this is in terms of HTML validation, if thats something you're very worried about. Then you just need to find the rel attribute of the script and then json_decode that. </p>

<p>eg</p>

<pre><code>&lt;script type='text/javascript' src='file.js' rel='{"myvar":"somevalue","anothervar":"anothervalue"}'&gt;&lt;/script&gt;
</code></pre>


blocks|key|1340236|text|如果可能的话，我建议不要使用全局变量。使用名称空间和OOP将参数传递给对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1340237|此代码属于file.js：|1340238|var+MYLIBRARY+=+MYLIBRARY+%7C%7C+(function(){
++++var+_args+=+{};+//+private

++++return+{
++++++++init+:+function(Args)+{
++++++++++++_args+=+Args;
++++++++++++//+some+other+initialising
++++++++},
++++++++helloWorld+:+function()+{
++++++++++++alert('Hello+World!+-'+%2B+_args[0]);
++++++++}
++++};
}());|code-block|syntax|javascript|1340239|在您的html文件中：|1340240|<script+type="text/javascript"+src="file.js"></script>
<script+type="text/javascript">
+++MYLIBRARY.init(["somevalue",+1,+"controlId"]);
+++MYLIBRARY.helloWorld();
</script>|1340241|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I'd recommend not using global variables if possible. Use a namespace and OOP to pass your arguments through to an object.</p>

<p>This code belongs in file.js:</p>

<pre><code>var MYLIBRARY = MYLIBRARY || (function(){
    var _args = {}; // private

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

<p>And in your html file:</p>

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


blocks|key|1340317|text|这是一个非常仓促的概念证明。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1340318|我相信至少有两个地方可以改进，我也相信这不会在野外生存很长时间。欢迎任何使其更具表现力或可用性的反馈。|1340319|关键是设置脚本元素的id。唯一的问题是，这意味着您只能调用脚本一次，因为它会查找该ID来提取查询字符串。相反，如果脚本循环所有查询元素以查看其中是否有任何元素指向它，并且如果有，则使用此类脚本元素的最后一个实例，则可以修复此问题。不管怎样，下面的代码如下：|1340320|被调用的脚本：|1340321|window.onload+=+function()+{
//Notice+that+both+possible+parameters+are+pre-defined.
//Which+is+probably+not+required+if+using+proper+object+notation
//in+query+string,+or+if+variable-variables+are+possible+in+js.
var+header;
var+text;

//script+gets+the+src+attribute+based+on+ID+of+page's+script+element:
var+requestURL+=+document.getElementById("myScript").getAttribute("src");

//next+use+substring()+to+get+querystring+part+of+src
var+queryString+=+requestURL.substring(requestURL.indexOf("?")+%2B+1,+requestURL.length);

//Next+split+the+querystring+into+array
var+params+=+queryString.split("&");

//Next+loop+through+params
for(var+i+=+0;+i+<+params.length;+i%2B%2B){
+var+name++=+params[i].substring(0,params[i].indexOf("="));
+var+value+=+params[i].substring(params[i].indexOf("=")+%2B+1,+params[i].length);

++++//Test+if+value+is+a+number.+If+not,+wrap+value+with+quotes:
++++if(isNaN(parseInt(value)))+{
++params[i]+=+params[i].replace(value,+"'"+%2B+value+%2B+"'");
+}

++++//+Finally,+use+eval+to+set+values+of+pre-defined+variables:
+eval(params[i]);
}

//Output+to+test+that+it+worked:
document.getElementById("docTitle").innerHTML+=+header;
document.getElementById("docText").innerHTML+=+text;
};|code-block|syntax|javascript|1340322|通过以下页面调用的脚本：|1340323|<script+id="myScript"+type="text/javascript"+
++++++++src="test.js?header=Test+Page&text=This+Works"></script>

<h1+id="docTitle"></h1>
<p+id="docText"></p>|1340324|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Here is a very rushed proof of concept.</p>

<p>I'm sure there are at least 2 places where there can be improvements, and I'm also sure that this would not survive long in the wild. Any feedback to make it more presentable or usable is welcome.</p>

<p>The key is setting an id for your script element. The only catch is that this means you can only call the script once since it looks for that ID to pull the query string. This could be fixed if, instead, the script loops through all query elements to see if any of them point to it, and if so, uses the last instance of such an script element. Anyway, on with the code:</p>

<h3>Script being called:</h3>

<pre><code>window.onload = function() {
//Notice that both possible parameters are pre-defined.
//Which is probably not required if using proper object notation
//in query string, or if variable-variables are possible in js.
var header;
var text;

//script gets the src attribute based on ID of page's script element:
var requestURL = document.getElementById("myScript").getAttribute("src");

//next use substring() to get querystring part of src
var queryString = requestURL.substring(requestURL.indexOf("?") + 1, requestURL.length);

//Next split the querystring into array
var params = queryString.split("&amp;");

//Next loop through params
for(var i = 0; i &lt; params.length; i++){
 var name  = params[i].substring(0,params[i].indexOf("="));
 var value = params[i].substring(params[i].indexOf("=") + 1, params[i].length);

    //Test if value is a number. If not, wrap value with quotes:
    if(isNaN(parseInt(value))) {
  params[i] = params[i].replace(value, "'" + value + "'");
 }

    // Finally, use eval to set values of pre-defined variables:
 eval(params[i]);
}

//Output to test that it worked:
document.getElementById("docTitle").innerHTML = header;
document.getElementById("docText").innerHTML = text;
};
</code></pre>

<h3>Script called via following page:</h3>

<pre><code>&lt;script id="myScript" type="text/javascript" 
        src="test.js?header=Test Page&amp;text=This Works"&gt;&lt;/script&gt;

&lt;h1 id="docTitle"&gt;&lt;/h1&gt;
&lt;p id="docText"&gt;&lt;/p&gt;
</code></pre>


blocks|key|1340373|text|请查看此URL。它完美地满足了需求。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1340374|http://feather.elektrum.org/book/src.html|offset|length|1340375|非常感谢作者。为了快速参考，我粘贴了下面的主要逻辑：|1340376|var+scripts+=+document.getElementsByTagName('script');
var+myScript+=+scripts[+scripts.length+-+1+];

var+queryString+=+myScript.src.replace(/%5E[%5E\?]%2B\??/,'');

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%2B%2B+)+{
++++var+KeyVal+=+Pairs[i].split('=');
++++if+(+!+KeyVal+%7C%7C+KeyVal.length+!=+2+)+continue;
++++var+key+=+unescape(+KeyVal[0]+);
++++var+val+=+unescape(+KeyVal[1]+);
++++val+=+val.replace(/\%2B/g,+'+');
++++Params[key]+=+val;
++}
++return+Params;
}|code-block|syntax|javascript|1340377|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|15|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

<p>Check out this URL.  It is working perfectly for the requirement.</p>

<p><a href="http://feather.elektrum.org/book/src.html" rel="noreferrer">http://feather.elektrum.org/book/src.html</a></p>

<p>Thanks a lot to the author. For quick reference I pasted the main logic below:</p>

<pre><code>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(/[;&amp;]/);
  for ( var i = 0; i &lt; 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;
}
</code></pre>


blocks|key|1125329|text|很好的问题和有创意的答案，但我的建议是让你的方法参数化，这应该可以解决你所有的问题，而不需要任何技巧。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1125330|如果您有以下功能：|1125331|function+A()
{
++++var+val+=+external_value_from_query_string_or_global_param;
}|code-block|syntax|javascript|1125332|您可以将其更改为：|1125333|function+B(function_param)
{
++++var+val+=+function_param;
}|1125334|我认为这是最自然的方法，你不需要创建额外的关于‘文件参数’的文档，你会得到同样的东西。如果您允许其他开发人员使用您的js文件，这将特别有用。|1125335|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Nice question and creative answers but my suggetion is to make your methods paramterized and that should solve all your problems without any tricks.</p>

<p>if you have function:</p>

<pre><code>function A()
{
    var val = external_value_from_query_string_or_global_param;
}
</code></pre>

<p>you can change this to:</p>

<pre><code>function B(function_param)
{
    var val = function_param;
}
</code></pre>

<p>I think this is most natural approach, you don't need to crate extra documentation about 'file parameters' and you receive the same. This specially useful if you allow other developers to use your js file.</p>


blocks|key|1125373|text|您可以传递具有任意属性的参数。这在所有最新的浏览器中都有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1125374|<script+type="text/javascript"+data-my_var_1="some_val_1"+data-my_var_2="some_val_2"+src="/js/somefile.js"></script>|code-block|syntax|javascript|1125375|在somefile.js中，您可以这样获得传递的变量值：|1125376|.|1125377|var+this_js_script+=+$('script[src*=somefile]');+//+or+better+regexp+to+get+the+file+name..

var+my_var_1+=+this_js_script.attr('data-my_var_1');+++
if+(typeof+my_var_1+===+"undefined"+)+{
+++var+my_var_1+=+'some_default_value';
}
alert(my_var_1);+//+to+view+the+variable+value

var+my_var_2+=+this_js_script.attr('data-my_var_2');+++
if+(typeof+my_var_2+===+"undefined"+)+{
+++var+my_var_2+=+'some_default_value';
}
alert(my_var_2);+//+to+view+the+variable+value|1125378|...etc...|1125379|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>You can pass parameters with arbitrary attributes. This works in all recent browsers.</p>

<pre><code>&lt;script type="text/javascript" data-my_var_1="some_val_1" data-my_var_2="some_val_2" src="/js/somefile.js"&gt;&lt;/script&gt;
</code></pre>

<p>Inside somefile.js you can get passed variables values this way:</p>

<p>........</p>

<pre><code>var this_js_script = $('script[src*=somefile]'); // or better regexp to get the file name..

var my_var_1 = this_js_script.attr('data-my_var_1');   
if (typeof my_var_1 === "undefined" ) {
   var my_var_1 = 'some_default_value';
}
alert(my_var_1); // to view the variable value

var my_var_2 = this_js_script.attr('data-my_var_2');   
if (typeof my_var_2 === "undefined" ) {
   var my_var_2 = 'some_default_value';
}
alert(my_var_2); // to view the variable value
</code></pre>

<p>...etc...</p>


blocks|key|1340518|text|我遇到的另一个想法是为<script>元素分配一个id，并将参数作为data-*属性传递。生成的<script>标记将如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1340519|<script+id="helper"+data-name="helper"+src="helper.js"></script>|code-block|syntax|javascript|1340520|然后，脚本可以使用该id以编程方式定位自身并解析参数。给定前面的<script>标记，可以像这样检索名称：|1340521|var+name+=+document.getElementById("helper").getAttribute("data-name");|1340522|我们得到name+=+helper|1340523|entityMap^0|B|8|P|2|Y|6|1C|8|0|0|W|8|0|0|4|4|B|6|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|R|$]]

<p>Another idea I came across was assigning an <code>id</code> to the <code>&lt;script&gt;</code> element and passing the arguments as <code>data-*</code> attributes.  The resulting <code>&lt;script&gt;</code> tag would look something like this:</p>

<pre><code>&lt;script id="helper" data-name="helper" src="helper.js"&gt;&lt;/script&gt;
</code></pre>

<p>The script could then use the id to programmatically locate itself and parse the arguments.  Given the previous <code>&lt;script&gt;</code> tag, the name could be retrieved like this:</p>

<pre><code>var name = document.getElementById("helper").getAttribute("data-name");
</code></pre>

<p>We get <code>name</code> = <code>helper</code></p>


blocks|key|1125435|text|可能很简单|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1125436|例如|1125437|<script+src="js/myscript.js?id=123"></script>
<script>
++++var+queryString+=+$("script[src*='js/myscript.js']").attr('src').split('?')[1];
</script>|code-block|syntax|javascript|1125438|然后，您可以将查询字符串转换为json，如下所示|1125439|var+json+=+$.parseJSON('{"'+
++++++++++++%2B+queryString.replace(/&/g,+'","').replace(/=/g,+'":"')+
++++++++++++%2B+'"}');|1125440|然后可以像这样使用|1125441|console.log(json.id);|1125442|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>might be very simple</p>

<p>for example </p>

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

<p>You can then convert query string into json like below</p>

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

<p>and then can use like </p>

<pre><code>console.log(json.id);
</code></pre>


blocks|key|1125514|text|如果您需要一种通过CSP检查(禁止不安全内联)的方法，那么您必须使用nonce方法将唯一值添加到脚本和CSP指令中，或者将您的值写入html并再次读取它们。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1125515|Express.js的随机数方法：|1125516|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+%2B+1);</script>`)
})|code-block|syntax|javascript|1125517|或者将值写入html方法。在本例中使用Jquery：|1125518|<div+id="account"+data-email="{{user.email}}"></div>
...


$(document).ready(()+=>+{
++++globalThis.EMAIL+=+$('#account').data('email');
}|1125519|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>If you need a way that passes CSP check (which prohibits unsafe-inline) then you have to use nonce method to add a unique value to both the script and the CSP directive or write your values into the html and read them again. </p>

<p>Nonce method for express.js:</p>

<pre><code>const uuidv4 = require('uuid/v4')

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

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

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

<p>or write values to html method. in this case using Jquery:</p>

<pre><code>&lt;div id="account" data-email="{{user.email}}"&gt;&lt;/div&gt;
...


$(document).ready(() =&gt; {
    globalThis.EMAIL = $('#account').data('email');
}
</code></pre>


blocks|key|1340726|text|虽然这个问题在一段时间前已经被提出，但直到今天它仍然是相关的。这不是一个使用脚本文件参数的简单方法，但我已经有一些极端的用例，这种方式最适合。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1340727|我偶然发现了这篇文章，想找出一个比我之前写的更好的解决方案，希望能找到一个原生功能或类似的东西。|1340728|我将分享我的解决方案，直到一个更好的解决方案被实现。这在大多数现代浏览器上都有效，甚至可能在更老的浏览器上也没有尝试过。|1340729|上面的所有解决方案都是基于这样一个事实，即它必须注入预定义的和标记良好的脚本标记，并完全依赖于HTML实现。但是，如果脚本是动态注入的，或者更糟糕的是，如果你正在编写一个将在各种网站中使用的库呢？|1340730|在这些和其他一些情况下，上述所有答案都是不够的，甚至变得过于复杂。|1340731|首先，让我们试着了解我们需要在这里实现什么。我们所需要做的就是获得脚本本身的URL，这是小菜一碟。|1340732|实际上，有一个很好的技巧可以从脚本本身获取脚本URL。原生Error类的功能之一是能够提供“有问题的位置”的堆栈跟踪，包括到最后一次调用的确切文件跟踪。为了实现这一点，我将使用Error实例的堆栈属性，一旦创建，它将提供完整的堆栈跟踪。|offset|length|style|CODE|1340733|下面是魔术的工作原理：|1340734|//+The+pattern+to+split+each+row+in+the+stack+trace+string
const+STACK_TRACE_SPLIT_PATTERN+=+/(?:Error)?\n(?:\s*at\s%2B)?/;
//+For+browsers,+like+Chrome,+IE,+Edge+and+more.
const+STACK_TRACE_ROW_PATTERN1+=+/%5E.%2B?\s$(.%2B?):\d%2B:\d%2B$$/;
//+For+browsers,+like+Firefox,+Safari,+some+variants+of+Chrome+and+maybe+other+browsers.
const+STACK_TRACE_ROW_PATTERN2+=+/%5E(?:.*?@)?(.*?):\d%2B(?::\d%2B)?$/;

const+getFileParams+=+()+=>+{
++++const+stack+=+new+Error().stack;
++++const+row+=+stack.split(STACK_TRACE_SPLIT_PATTERN,+2)[1];
++++const+[,+url]+=+row.match(STACK_TRACE_ROW_PATTERN1)+%7C%7C+row.match(STACK_TRACE_ROW_PATTERN2)+%7C%7C+[];
++++if+(!url)+{
++++++++console.warn("Something+went+wrong.+You+should+debug+it+and+find+out+why.");
++++++++return;
++++}
++++try+{
++++++++const+urlObj+=+new+URL(url);
++++++++return+urlObj.searchParams;+//+This+feature+doesn't+exists+in+IE,+in+this+case+you+should+use+urlObj.search+and+handle+the+query+parsing+by+yourself.
++++}+catch+(e)+{
++++++++console.warn(`The+URL+'${url}'+is+not+valid.`);
++++}
}|code-block|syntax|javascript|1340735|现在，在脚本调用的任何情况下，就像在OP案例中一样：|1340736|<script+type="text/javascript"+src="file.js?obj1=somevalue&obj2=someothervalue"></script>|1340737|在file.js脚本中，您现在可以执行以下操作：|1340738|const+params+=+getFileParams();
console.log(params.get('obj2'));
//+Prints:+someothervalue|1340739|这也适用于RequireJS和其他动态插入的文件脚本。|1340740|entityMap|0|LINK|mutability|MUTABLE|url|https://requirejs.org/^0|0|0|0|0|0|0|T|5|0|0|0|0|0|1|7|0|0|5|9|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1H|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1I|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1J|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1K|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1L|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1M|8|@$N|1N|O|1O|P|Q]]|9|@]|A|$]]|$1|R|3|S|5|6|7|1P|8|@]|9|@]|A|$]]|$1|T|3|U|5|V|7|1Q|8|@]|9|@]|A|$W|X]]|$1|Y|3|Z|5|6|7|1R|8|@]|9|@]|A|$]]|$1|10|3|11|5|V|7|1S|8|@]|9|@]|A|$W|X]]|$1|12|3|13|5|6|7|1T|8|@$N|1U|O|1V|P|Q]]|9|@]|A|$]]|$1|14|3|15|5|V|7|1W|8|@]|9|@]|A|$W|X]]|$1|16|3|17|5|6|7|1X|8|@]|9|@$N|1Y|O|1Z|1|20]]|A|$]]|$1|18|3|-4|5|6|7|21|8|@]|9|@]|A|$]]]|19|$1A|$5|1B|1C|1D|A|$1E|1F]]]]

<p>Although this question has been asked a while ago, it is still relevant as of today. This is not a trivial approach using script file params, but I already had some extreme use-cases that this way was most suited.</p>
<p>I came across this post to find out a better solution than I wrote a while ago, with hope to find maybe a native feature or something similar.<br />
I will share my solution, up until a better one will be implemented. This works on most modern browsers, maybe even on older ones, didn't try.</p>
<p>All the solutions above, are based on the fact that it has to be injected with predefined and well marked SCRIPT tag and rely completely on the HTML implementation. But, what if the script is injected dynamically, or even worse, what if you are write a library, that will be used in a variety of websites?<br />
In these and some other cases, all the above answers are not sufficient and even becoming too complicated.</p>
<p>First, let's try to understand what do we need to achieve here. All we need to do is to get the URL of the script itself, from there it's a piece of cake.</p>
<p>There is actually a nice trick to get the script URL from the script itself. One of the functionalities of the native <code>Error</code> class, is the ability to provide a stack trace of the &quot;problematic location&quot;, including the exact file trace to the last call. In order to achieve this, I will use the stack property of the Error instance, that once created, will give the full stack trace.</p>
<p>Here is how the magic works:</p>
<pre class="lang-js prettyprint-override"><code>// The pattern to split each row in the stack trace string
const STACK_TRACE_SPLIT_PATTERN = /(?:Error)?\n(?:\s*at\s+)?/;
// For browsers, like Chrome, IE, Edge and more.
const STACK_TRACE_ROW_PATTERN1 = /^.+?\s$(.+?):\d+:\d+$$/;
// For browsers, like Firefox, Safari, some variants of Chrome and maybe other browsers.
const STACK_TRACE_ROW_PATTERN2 = /^(?:.*?@)?(.*?):\d+(?::\d+)?$/;

const getFileParams = () =&gt; {
    const stack = new Error().stack;
    const row = stack.split(STACK_TRACE_SPLIT_PATTERN, 2)[1];
    const [, url] = row.match(STACK_TRACE_ROW_PATTERN1) || row.match(STACK_TRACE_ROW_PATTERN2) || [];
    if (!url) {
        console.warn(&quot;Something went wrong. You should debug it and find out why.&quot;);
        return;
    }
    try {
        const urlObj = new URL(url);
        return urlObj.searchParams; // This feature doesn't exists in IE, in this case you should use urlObj.search and handle the query parsing by yourself.
    } catch (e) {
        console.warn(`The URL '${url}' is not valid.`);
    }
}
</code></pre>
<p>Now, in any case of script call, like in the OP case:</p>
<pre><code>&lt;script type=&quot;text/javascript&quot; src=&quot;file.js?obj1=somevalue&amp;obj2=someothervalue&quot;&gt;&lt;/script&gt;
</code></pre>
<p>In the <code>file.js</code> script, you can now do:</p>
<pre><code>const params = getFileParams();
console.log(params.get('obj2'));
// Prints: someothervalue
</code></pre>
<p>This will also work with <a href="https://requirejs.org" rel="nofollow noreferrer">RequireJS</a> and other dynamically injected  file scripts.</p>


blocks|key|1340818|text|我认为，在包含javascript的页面上使用localStorage，然后在javascript本身内部重用它，这是更好、更现代的解决方案。在localStorage中使用以下命令进行设置：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1340819|localStorage.setItem("nameOfVariable",+"some+text+value");|code-block|syntax|javascript|1340820|并在javascript文件中引用它，如下所示：|1340821|localStorage.getItem("nameOfVariable");|1340822|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I think it is far more better and modern solution to just use localStorage on the page where the javascript is included and then just re-use it inside the javascript itself. Set it in localStorage with:</p>
<pre><code>localStorage.setItem(&quot;nameOfVariable&quot;, &quot;some text value&quot;);
</code></pre>
<p>and refer to it inside javascript file like:</p>
<pre><code>localStorage.getItem(&quot;nameOfVariable&quot;);
</code></pre>


blocks|key|1125790|text|可以将参数传递给js模块，然后通过import.meta.url读取它们。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1125791|例如，使用以下HTML|1125792|<script+type="module">
import+'./index.mjs?someURLInfo=5';
</script>|code-block|syntax|javascript|1125793|以下JavaScript文件将记录someURLInfo参数：|1125794|//+index.mjs
new+URL(import.meta.url).searchParams.get('someURLInfo');+//+5|1125795|当一个文件导入另一个文件时，情况也是如此：|1125796|//+index.mjs
import+'./index2.mjs?someURLInfo=5';

//+index2.mjs
new+URL(import.meta.url).searchParams.get('someURLInfo');+//+5|1125797|entityMap^0|H|F|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|13|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|U|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|V|$]]

<p>It's possible to pass parameters to js modules and read them after via <code>import.meta.url</code>.</p>
<p>For example, with the following HTML</p>
<pre><code>&lt;script type=&quot;module&quot;&gt;
import './index.mjs?someURLInfo=5';
&lt;/script&gt;
</code></pre>
<p>the following JavaScript file will log the someURLInfo parameter:</p>
<pre><code>// index.mjs
new URL(import.meta.url).searchParams.get('someURLInfo'); // 5
</code></pre>
<p>The same applies when a file imports another:</p>
<pre><code>// index.mjs
import './index2.mjs?someURLInfo=5';

// index2.mjs
new URL(import.meta.url).searchParams.get('someURLInfo'); // 5
</code></pre>


<p>Often I will have a JavaScript file that I want to use which requires certain variables be defined in my web page.</p>

<p>So the code is something like this:</p>

<pre><code>&lt;script type="text/javascript" src="file.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
   var obj1 = "somevalue";
&lt;/script&gt;
</code></pre>

<p>But what I want to do is:</p>

<pre><code>&lt;script type="text/javascript" 
     src="file.js?obj1=somevalue&amp;obj2=someothervalue"&gt;&lt;/script&gt;
</code></pre>

<p>I tried different methods and the best one yet is to parse the query string like this:</p>

<pre><code>var scriptSrc = document.getElementById("myscript").src.toLowerCase();
</code></pre>

<p>And then search for my values.</p>

<p>I wonder if there is another way to do this without building a function to parse my string.</p>

<p>Do you all know other methods?</p>


Passing parameters to JavaScript files

服务器

jQuery

我经常会有一个我想要使用的JavaScript文件，它需要在我的网页中定义某些变量。所以代码是这样的：<script type="text/javascript" src="file.js"></script><script type="text/javascript">   var obj1 = "somevalue...

问将参数传递给JavaScript文件
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将参数传递给JavaScript文件EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将参数传递给JavaScript文件
EN