JavaScript 파일에 매개 변수 전달

종종 웹 페이지에 특정 변수를 정의 해야하는 JavaScript 파일을 사용하려고합니다.

따라서 코드는 다음과 같습니다.

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

그러나 내가하고 싶은 것은 :

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

다른 방법을 시도했지만 가장 좋은 방법은 다음과 같이 쿼리 문자열을 구문 분석하는 것입니다.

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

그런 다음 내 값을 검색하십시오.

내 문자열을 구문 분석하는 함수를 작성하지 않고 이것을 수행하는 다른 방법이 있는지 궁금합니다.

모두 다른 방법을 알고 있습니까?

가능하면 전역 변수를 사용하지 않는 것이 좋습니다. 네임 스페이스와 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>

임의의 속성으로 매개 변수를 전달할 수 있습니다. 이것은 모든 최신 브라우저에서 작동합니다.

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

somefile.js 내부에서 다음과 같이 전달 된 변수 값을 얻을 수 있습니다.

........

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

...기타...

내가 본 또 다른 아이디어 id는 <script>요소에 an 을 할당 하고 인수를 data-*속성으로 전달 하는 것이 었습니다 . 결과 <script>태그는 다음과 같습니다.

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

그런 다음 스크립트는 id를 사용하여 프로그래밍 방식으로 자체를 찾고 인수를 구문 분석 할 수 있습니다. 이전 <script>태그가 주어지면 다음 과 같이 이름을 검색 할 수 있습니다.

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

우리는 name=helper

이 URL을 확인하십시오. 요구 사항에 완벽하게 작동합니다.

http://feather.elektrum.org/book/src.html

저자에게 감사합니다. 빠른 참조를 위해 아래의 주요 논리를 붙여 넣었습니다.

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;
}

전역 변수 :-D를 사용합니다.

이처럼 :

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

에 'file.js'가 액세스 할 수있는 자바 스크립트 코드 obj1와 obj2문제없이.

편집 'file.js'가 확인 obj1하고 obj2심지어 선언 된 경우 다음 함수를 사용할 수 있는지 추가하고 싶습니다 .

function IsDefined($Name) {
    return (window[$Name] != undefined);
}

도움이 되었기를 바랍니다.

여기에 매우 서두른 개념 증명이 있습니다.

개선이 가능한 곳이 2 곳 이상 있다고 확신하며, 이것이 오래 지속되지는 않을 것이라고 확신합니다. 더 유용하거나 유용하게 만드는 피드백은 환영합니다.

핵심은 스크립트 요소의 ID를 설정하는 것입니다. 유일한 발견은 스크립트가 ID를 찾아 쿼리 문자열을 가져 오기 때문에 스크립트를 한 번만 호출 할 수 있다는 것입니다. 대신 스크립트가 모든 쿼리 요소를 반복하여 해당 요소가 가리키는 지 확인한 다음 해당 스크립트 요소의 마지막 인스턴스를 사용하는 경우이 문제를 해결할 수 있습니다. 어쨌든, 코드와 함께 :

호출되는 스크립트 :

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("&");

//Next loop through params
for(var i = 0; i < 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;
};

다음 페이지를 통해 스크립트가 호출되었습니다.

<script id="myScript" type="text/javascript" 
        src="test.js?header=Test Page&text=This Works"></script>

<h1 id="docTitle"></h1>
<p id="docText"></p>

매우 간단 할 수 있습니다

예를 들어

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

그런 다음 아래와 같이 쿼리 문자열을 json으로 변환 할 수 있습니다

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

다음처럼 사용할 수 있습니다

console.log(json.id);

jQuery와 같은 Javascript 프레임 워크를 사용하는 경우 쉽게 수행 할 수 있습니다. 이렇게

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

이제 변수 매개 변수로 분할하여 이러한 매개 변수를 사용할 수 있습니다.

프레임 워크 없이도 동일한 프로세스를 수행 할 수 있지만 더 많은 코드가 필요합니다.

글쎄, 모든 스크립팅 언어로 자바 스크립트 파일을 작성하여 모든 요청시 파일에 변수를 주입 할 수 있습니다. 웹 서버에 js 파일을 정적으로 제거하지 않도록 지시해야합니다 (mod_rewrite를 사용하면 충분합니다).

이 js 파일은 지속적으로 변경되므로 캐싱이 손실됩니다.

안녕.

좋은 질문과 창의적인 답변이지만 제 제안은 메서드를 매개 변수화하여 트릭없이 모든 문제를 해결하는 것입니다.

기능이있는 경우 :

function A()
{
    var val = external_value_from_query_string_or_global_param;
}

이것을 다음으로 변경할 수 있습니다.

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

나는 이것이 가장 자연스러운 접근법이라고 생각합니다. '파일 매개 변수'에 대한 추가 문서를 작성할 필요가 없으며 동일한 것을받습니다. 다른 개발자가 js 파일을 사용할 수 있도록하는 경우 특히 유용합니다.

아니요, JS 파일 URL의 쿼리 문자열 부분에 변수를 추가하면 실제로이 작업을 수행 할 수 없습니다. 귀찮게하는 문자열을 구문 분석하기 위해 코드 부분을 작성하는 경우 다른 방법은 변수를 json 인코딩하여 태그의 rel 속성과 같은 변수에 넣는 것입니다. HTML 유효성 검사 측면에서 이것이 얼마나 유효한지 잘 모르겠습니다. 그런 다음 스크립트의 rel 속성을 찾은 다음 json_decode 만하면됩니다.

예 :

<script type='text/javascript' src='file.js' rel='{"myvar":"somevalue","anothervar":"anothervalue"}'></script>

유효한 HTML은 아니지만 (생각하지는 않습니다) 웹 페이지에서 스크립트 태그에 대한 사용자 정의 속성을 만들면 작동 하는 것 같습니다 .

<script id="myScript" myCustomAttribute="some value" ....>

그런 다음 자바 스크립트에서 사용자 정의 속성에 액세스하십시오.

var myVar = document.getElementById( "myScript" ).getAttribute( "myCustomAttribute" );

이것이 스크립트 소스 문자열을 구문 분석하는 것보다 낫거나 나쁜지 확실하지 않습니다.

CSP 검사를 통과하는 방법 (안전하지 않은 인라인을 금지 함)이 필요한 경우 nonce 메소드를 사용하여 스크립트와 CSP 지시문에 고유 한 값을 추가하거나 값을 html에 쓰고 다시 읽어야합니다.

express.js를위한 Nonce 메소드 :

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>`)
})

또는 HTML 메소드에 값을 쓰십시오. 이 경우 Jquery를 사용하십시오.

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


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