본문으로 바로가기

<script language='javascript' src='aa.js?id=aaa'> </script>

이와 같이 호출해서 id의 값이 aaa값을 호출하는 방법에 대해서 기술해 보도록 하겠습니다.

먼저 자바스크립트는 클라이언트 스크립트 입니다. 저런식으로 서버 사이드 스크립트(즉, 웹프로그램) 처럼 get 방식이나 post 방식으로 값을 주고 받지 못합니다. 따라서 ?id=aaa 은 무의미 합니다.

그럼 포기하고 html 방식으로 처리하는 방법과 getElementsByTagName를 이용한 방법 2가지를 기술해 보도록 하겠습니다.


1. html 방식으로 처리하는 방법

자바스크립트에서 get방식으로 넘어온 값을 받을수 있습니다.

test.htm에 <script language="javascript" src="test.js"></script>

이부분을 추가하고 test.htm?id=aaa라고 입력하면 aaa라는 값을 출력합니다.

아래 fc_querystring(ars_name)함수는 get방식으로 넘어온 값을 return해주는

함수입니다. 전 id값이 공백이 아니면 출력하는 제어를 했습니다.

/*
' ------------------------------------------------------------------
' Function    : fc_querystring(ars_name)
' Description : url의 querystring을 리턴
' Argument    : String 체크할 파라메타
' Return      : String 파라메타의 값
' ------------------------------------------------------------------
*/
function fc_querystring(ars_name)
{
   var lo_result    = new Array;
   var ls_url_query = location.search; // url에서 ? 부터의 문자열
   var lo_array1    = new Array; // & 로 분리시킨 값이 들어갈배열
   var lo_array2    = new Array; // = 로 분리시킨 값이 들어갈배열
   var i = 0;

   ls_url_query = ls_url_query.slice(1);      // 첫문자 ?는 자르고
   lo_array1    = ls_url_query.split("&");    // & 배열로 나눈다.

   for(i=0; i< lo_array1.length; i++)
   {
      lo_array2 = lo_array1[i].split("=");    // = 배열나누기
      lo_result[lo_array2[0]] = lo_array2[1]; // 결과를 lo_result에 저장
   }  

   if(lo_result[ars_name] != null)
   {     
      return lo_result[ars_name];     
   }
   else
   {     
      return "";
   }
}

if(fc_querystring("id") != "")
{
   alert(fc_querystring("id"));
}


2. getElementsByTagName 을 이용한 방법

test.htm 파일
<html>
<head>
<script type='text/javascript' src='http://www.prototypejs.org/javascripts/prototype.js'></script>
<script type='text/javascript' src='test.js?id=aaa'></script>
<body>
</body>
</html>

test.js 파일
var fetchQuerystring = {
  Version: '0.1',
  REQUIRED_PROTOTYPE: '1.5.0',
  load: function(js_name, ars_name) {
    function convertVersionString(versionString){
      var r = versionString.split('.');
      return parseInt(r[0])*100000 + parseInt(r[1])*1000 + parseInt(r[2]);
    }

    if((typeof Prototype=='undefined') ||
       (typeof Element == 'undefined') ||
       (typeof Element.Methods=='undefined') ||
       (convertVersionString(Prototype.Version) <
        convertVersionString(fetchQuerystring.REQUIRED_PROTOTYPE))) {
       throw("This function requires the Prototype JavaScript framework >= " +
        fetchQuerystring.REQUIRED_PROTOTYPE);
    }

    $A(document.getElementsByTagName("script")).findAll( function(s) {
        // test 파일에 맞게 수정
        return (s.src && s.src.match(/test\.js(\?.*)?$/))
    }).each( function(s) {
       // id= 항목에 맞게 수정
      var includes = s.src.match(/\?.*id=([a-z,]*)/);
     
     // 2번재 항목 출력
      alert(includes[1]);
    });
  }
}

fetchQuerystring.load();


ps. 1번 방식만 네이버 지식인에 나와있길래 1번은 참조하고 2번은 새로 만들어 봅니다

 

[출처]. : http://blog.dreamwiz.com/shchun74/6459683