Creative Wrong Answer

ExternalInterface 세번째 입니다.

ExternalInterface가 뭔지 전혀 모르겠다 하시는 분은
2009/12/30 - [Flex/ExternalInterface] - ExternalInterface 기본기
이 포스트를 먼저 읽어 보고 오시면 됩니다.

자바스크립트에는 유용한 기능들이 많습니다.
가장 많이 사용하는 window 객체에는 브라우저의 정보 및 페이지 정보를 알아올수 있는 메서드들이 포함되어있는데 페이지 정보는 location에 들어있습니다. 그중 몇가지를 살펴보면 아래와 같습니다.

window.location.href
주로 페이지 이동시에 많이 사용했던 속성인데 저 자체로는 현재 페이지의 정보를 가지고 있습니다.

아무사이트나 들어간 후에 주소창에 javascript:window.location.href 라고 쓰게 되면 현재 페이지 주소가 나타납니다.
자바스크립트는 클라이언트에서 직접 실행되는 스크립트이기 때문에 기본 메서드 같은 경우 이런식으로 브라우저 주소창에 쓰면 대부분 실행됩니다.

window.location.hostname
페이지의 호스트 주소 정보를 반환합니다.

window.location.pathname
호스트 네임 뒤로 실제 페이지까지의 경로를 반환합니다.

window.location.search
주소 부분에서 get방식으로 넘어온 파라미터 부분을 반환합니다.
이게 중요합니다.
플렉스에서 get방식의 파라미터를 받아올때에도 이것을 사용합니다.

간단하게 예제를 봅시당.

주소 예제 : http://rinn.kr/post/aa.html?blogID=rinn&name=퍼플린

window.location.href : http://rinn.kr/post/aa.html?blogID=rinn&name=퍼플린
window.location.hostname : rinn.kr
window.location.pathname : /post/aa.html
window.location.search : ?blogID=rinn&name=퍼플린

딱 보면 뭘 어떻게 사용해야 할지 감이 오실꺼라 생각됩니다.

HTML 페이지나 플렉스 어플리케이션에서 새창으로 다른 어플리케이션을 띄우면서 파라미터를 넘겨줘야 하는 경우가 생기는 상황이 많이 발생합니다.
내부에 로드 하는 경우는 여러가지 방법으로 데이터를 교환 할수 있지만 브라우저 자체가 달라지는 경우 에는 좀 힘들게 됩니다.

플렉스에서 넘어온 파라미터를 받는 Application.application.parameters 같은 경우 flashVar 로 넘어오는 것만 받을수 있습니다.
따라서 플렉스의 swf 를 임베드 할때에 파라미터를 같이 세팅 해줘야 하고 자바스크립트로 배열을 미리 만들어놓는다거나 해서 받아오도록 처리했었습니다.
데이터가 많아지거나 가변적이거나 할 경우 이런 방법은 꽤나 버그를 유발할수 있는 소지가 많습니다.

직접 주소를 가져다가 그냥 짤라서 사용하기만 하면 되니 이쪽이 더 쉬울꺼라 생각됩니다.

어플리케이션간에 파라미터 이동을 나만 고민 하지는 않았겠지요.
당연합니다 구글에 이미 사용이 가능한 소스도 있습니다


public static function getParameterValue(key:String):String
{ 
	var value:String;
	var uparam:String = ExternalInterface.call("window.location.search.toString");
	
	if(uparam==null)
	{
    	return null;
    }
    var paramArray:ArrayCollection = new ArrayCollection(uparam.split('&'));
    for(var x:int=0; x-1)
    	{
    		value = (p.replace((key + '='), '')).replace('?','');
    		x=paramArray.length;
    	}
    }
    
    return value;
}
깔끔하게 키값으로 받아올수 있도록 구현되어있습니다.


ExternalInterface.call("window.location.search.toString");

이렇게 직접 호출한 놈을 가지고 파싱해서 키에 맞는 value 값을 리턴해줍니다.

아래의 소스는 key-value 의 object로 넘어온 놈들을 전부 리턴 해주는 함수 입니다.


public static function getAllParameters():Object
{
	var _params:Object = {};
	var uparam:String = ExternalInterface.call("window.location.search.toString");
	
	if(uparam==null)
	{
    	return null;
    }
	
	uparam = uparam.replace('?','');
	
	var params:Array = uparam.split('&');
	var length:uint = params.length;
	
	for (var i:uint=0,index:int=-1; i<length; i++) 
	{
		var kvPair:String = params[i];
		if((index = kvPair.indexOf("=")) > 0)
		{
			var key:String = kvPair.substring(0,index);
			var value:String = kvPair.substring(index+1);
			_params[key] = value;
		}
	}
	return _params;
}

이처럼 자바스크립트를 사용할수 있는 Externalinterface는 활용할수 있는 부분이 꽤 많습니다.
이 글을 보시게 되는 분들도 좋은 방법이 있으면 저한테도 공유좀 부탁드립니다 -ㅅ-;;;




ps.
전체를 가져오는 소스와 키로 받아오는 소스는 제작자가 다른 소스 입니다.
북마크를 날려먹은 관계로 원본 블로그 주소를 찾을수가 없군요.
이곳저곳에서 퍼다가 링크 걸어놓은 주소는 있는거 같은데.. 쩝;
아시는분은 댓글로 남겨주시면 제작자 블로그 링크를 추가 하도록 하겠습니다.

저작자 표시 비영리 동일 조건 변경 허락
신고

Comment +2

  • 트랙백 감사합니다. ExternalInterface를 이용해 JS의 API를 사용하는 것은 좋은 방법이긴 하지만 약점도 있습니다. 바로 웹브라우져에서 동작하지 않고 독립 Flash Player에서 동작하거나 AIR에서 동작하는 경우입니다. 이때는 ExternalInterface를 이용하는 것자체가 무의미합니다. 물론 반드시 웹브라우져에서 동작한다는 것을 가정한다면 상관없습니다. ^^

    • 브라우저에서만 가능 하다는 내용은 기본기쪽을 쓰면서 언급 하기는 했습니다.

      아무래도 작업 하는쪽이 웹쪽만 작업 하다보니 별 생각없이 사용하게 되는거 같어요 ㅎㅎ