[javascript] JavaScript 파일에 매개 변수 전달

Program / 글쓴이

종종 웹 페이지에 특정 변수를 정의 해야하는 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);