aspirinirony/시인의 수학

너무 길어서

IE7과 IE6,FireFox의 차이로 인해 벌어지는 Tistory script 오류[이것 때문에 오늘도 밤새나..]

우선 차이를 알기 위한 이미지부터 보죠..

위 IE7

위 IE6

위 Firefox 2.0

위 세가지 브라우져에 같은 페이지를 로드시켰더니 이런 결과가 나왔습니다..

IE7는 동영상이 두개 IE6과 FF은 동여상이 하나 입니다.

소스라인이 살아있으며 브라우져가 저에게 장난치지 안는다면 IE7의 결과가 나와야 정상인데...요...


이 Blog의 스크립트상 정상적인 브라우져의 script 파싱의 결과로는 IE7의 경우로 나오겠지만 제가 server2003 sp1을 사용하다 보니 IE6과 FF1.5를 사용하고 있습니다..

제 컴퓨터의 경우 xp와 server를 듀얼부팅으로 사용하고 있는데 주로 server2003을 사용하지요..
어제 Flash Player script library가 신기하여 만든 동영상들인데.. 그때전 server에서 IE6와 FF1.5를 기준으로 만들었으며 만들면서 이 script의 최적화가 FF1.5라고 생각되어 FF1.5로 최적화 하여 만들었습니다.
[이유는 전체화면보기인데 IE7의 경우 전체화면보기가 가능하더군요.]

그런데 어이 없게 오늘 XP로 부팅하여 IE7으로 제 Blog를 보는 순간 우려 했던 결과가 나왔습니다.

이 script는 UFO.js를 사용해 Flash를 로드하는데 IE6에선 Tistory로 업로드한 UFO script 소스라인은 살아있되 실행되지 않는 결과가 나왔습니다. 그리하여 오브젝트로 IE전용 script와 FF전용 script를 동시에 사용하여 Post하였습니다..

만들면서 분명 결과물에 오류가 있다는 걸 알았지만 내가 모르는 무언가가 있나 싶어 그냥 급날조 소스로 얼버무려습니다.

결국 XP로 부팅하여 IE7으로 이 오류는 현실이 되었습니다.. IE6의 브라우져 옵션설정에 문제가 있는 것은 아닐까 아니면 Server2003의 보안설정으로 인해 이런 결과가 나온것일까 그런데 FF1.5도 IE6과 같은 결과가 나오는데.. 그럼하고 XP에 FF2.0을 설치하고 페이지를 로드하니 IE6,FF1.5와 같은 결과가 나왔습니다..

두 동영상이 한꺼번에 보이는 IE7같은 경우는 스크립트 실행결과상 true에 해당할수 있습니다.

왜냐하면 동영상을 동시에 두개를 뛰울수 있는 소스로 코딩했으니까요..

그런데 그 소스코드가 실행되지 않는 IE6과 FF시리즈로 인해 전 제가 모르는 무언가가 있는것이 아닌지 생각하고 있습니다.

참고로 IE6의 오프라인 상태에서 Tistory script라인을 모두 실행시키게 만들어 제가 직접 하나의 페이지를 통으로 코딩하였을 경우 두개의 동영상이 동시에 다 보입니다..

웹어플리케이션의 특성상 서버스크립트로 인해 온라인과 오프라인의 차이가 나올수 있겠지만 javascript 소스를 서버에서 replace하는 것도 아니고 소스보기로 볼 경우 해당 페이지의 javascript소스라인은 그대로 살아있습니다.. 그리고 js파일또한 그대로 로드되어 메서드를 실행하수 있는데 이건 도데체 어떤 경우로 이런 결과가 나오는 것인지 궁금하군요..

현재에도 왜 이런 결과가 나오는지 잘 이해되지 않고 있습니다.. 만약 동영상이 하나로 보인다면 동영상의 아래나 위에 하나의 .[점]이 찍혀있는것이 보일겁니다.. 그것이 FF전용 script의 흔적 입니다..

Post By Aspirinirony

IE와 Fox를 병렬화 시키기 위해 어순선 해여.

..

Mozilla Firefox Forum community 에서 많이 들어오는 Q는 firefox내에서 object 의 control이다..

결과적으로 fiefox내에서 window media 를 control하는 것이 아직까지의 나의 지식으론 할수 없다.

국내에선 embeding을 사용하는 경우가 대부분이지요[현재에선 object로 바뀌고 있지만]
하지만 embeding을 사용시 비표준 [IE기반] 을 사용시 동영상이 작동하지 않거나 재대로 작동되지[play() stop()] 못합니다.

그리하여 많은이들이 이를 병열적으로 동작할수 있는 방식을 찾고 있습니다..

embed는 비표준 형식이지만 IE나 Fox에서 사용하여도 작동이 되나 컨트롤할수는 없지요[fox]

하지만 embed는 비표준 마크업언어여서 [w3c 권고] object를 사용하기를 권하고 있다..

embed는 사실 embed로 제어되는 것이 아닙니다..

ActiveX로 제어되는 것으로 IE내에서 사용되는 미디어플레이어의 경우 버전별로 Acitvex객체를 지원하고 있으며 이것은 원도우내에 내장되어 있습니다.

net상에서 다운로드 받는 ActiveX객체와는 달리 윈도우 미디어 플레이어의 객체들은 로컬이기 때문에 아무런 보안설정없이 작동합니다. 이것은 어쩌면 윈도우내의 백도어고도 할수 있겠네요.. 이로 인해 해킹의 표적이 되기도합니다.  어찌되었든  이객체들은 play, stop을 비롯해 다양한 메소드를 가지고 있습니다. ActiveX는 Firefox에서 공식적으로 지원하고 있지 않습니다. html과 javascript로 비슷한 기능을 fox에서 구현하는것은 현재의 제 지식으론 어려운 일입니다.  그리고 비표준마크업은 언제 지원기능이 쫑날찌 알수 없습니다.

그리하여 fox에서 동영상을 보기 위해 fox plug-in을 설치하여 사용합니다. 하지만 컨트롤은 할수 없죠..

우선은 IE와 mozilla 계열의 object 태킹을 하자면..

IE Example

<div id="ie">
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
codebase="..."
width="320" height="310" id="media">
<param name="URL" value="http://news.naver.com/vod/mms.nhn?office_id=132&article_id=0000018004">
</object>
</div>

NS Mozilla Example

<div id="ns">
<object type="video/x-ms-asf-plugin" data="http://news.naver.com/vod/mms.nhn?office_id=132&article_id=0000018004" width="320" height="310" id="media">
</object>
</div>

IE param 을 사용하여 컨트롤한다는 건 잘 알려진 사실이고 그럼 Mozilla는 어떻게..

우선 url 은

IE는 <param name="URL" value="http://news.naver.com/vod/mms.nhn?office_id=132&article_id=0000018004">

NS <object type="video/x-ms-asf-plugin" data="http://news.naver.com/vod/mms.nhn?office_id=132&article_id=0000018004"

이것을 동시에 태깅하여 IE에서 뿌리면 두개의 media 가 나타나고 하나는 먹통이지요..

하지만 Firefox에서 뿌리면 IE쪽 media는 사라져 버립니다..

이것을 제어하기 위해선 당연히 navigater를 사용하지요.

function Browser()
{
var nav=navigator;
this.ns=(document.layers)? 1:0 ;
if(document.all)this.ie=1;else this.ie=0;
}
var B=new Browser();

function Show()
{
if(B.ie==true)
{
document.getElementById("ie").style.display ="";
document.getElementById("ns").style.display ="none";
}

라면 두 Browser에서 사용할수 있습니다. 이는 동영상 재생에 필요한 방법일뿐 control은 아직 연구 중입니다..

IE쪽으론 왠만한 일명 곰과도 같은 기능을 지니게 만들었지만 Fox를 알고 난뒤로  OTL 모드로 전화히고 말았습니다. 우물안의 개구리죠..

참고로 제가 만든 player입니다.

드래그엔 드롭으로 Browser내에서 이동과 컨트롤이 가능하지만 IE에서만 된다는거..

Fox내에서 Control을 가능하게 할수 있는 script가 있다면 트랙백이든 코멘트든 달아주세요.

web2.0이라는 말이 orelly의 blog post의 word로 쓰이고 난뒤 web은 시대의 전환기를 지나고 있다

새롭게 만들어지는 webpage의 DTD는 XHTML 1.1이로 바뀌고 있으며 비동기 통신으로 나온 AJAX이 이 광풍의 MAIN_POINT로 focus되고 있다..

A-JAX [Javascript + XML] 의 DOM 객체로 XHTML이 일상화 되면서 새로운 web개발자들은 AJAX에 중심을 두고 있으며 그로 인해 JAVASCRIPT와 XML이 필요가 아니라 필수 교과목으로 되어 버렸다.

web2.0이란 이렇게 만들어지고 있는가? online을 offline처럼 느끼게 만드는 인터페이스를 지니고는 web은 변신중이다..

그중에서 Prototype Framework Library로 불리우는 Javascript framework가 많은 개발자들로 부터 관심을 받고 있으며 이를 해석하고 사용하기 위한 해석을 하기 위해 본인도 집중하고 있기는 하다.

흥미롭다는 표현을 나타내고 싶다..

이러다 Prototype이 하나의 새로운 언어로 태어나게 되어버리는건 아닌..

html 3.1에서 부터 script가 들어가면서 다이나믹이란 이름이 나오기 시작했는데 그저 client 언어라는 이유로 어플리케이션에선 외면되었다..

허나 지금은 어플리케이션의 가장 중심이 script가 되어버렸으며 script method의 개발이 또다른 동작과 더 크게는 인터페이스마저 만들어 내게 되었다.

다이나믹한 page submit button은 사라져야하며 event로 data전송을 시켜야하는 시대..
필인도 처음 AJAX을 경험하고 기능을 구현하면서 느끼는 것이 submit button의 필요성이다..

form 의 post 나 get 이나 submit으로 server에게 postBack해주어야 안심이 되었던 시대..

이젠 form내 전송되는 data의 채팅같은 통신이 되어야 안심이 되는시대로 변화한다.

submit 버튼은 사라져야 하는가 일명 새로고침이라는 페이지 reload가 일어나는 짧은 시간을 참을수 없어 이러는건가

submit버튼을 사용해도 form에서 onsubmit event를 이용해서 send()를 호출해도 비동기 통신과 같은 느낌을 줄수 있는대

<script language=javascript>

var Post_send = create_request();

function create_request() {
    var request = null;
    try {
        request = new XMLHttpRequest();
    } catch (trymicrosoft) {
        try {
            request = new ActiveXObject("Msxml12.XMLHTTP");
        } catch (othermicrosoft) {
            try {
                request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (failed) {
                request = null;
            }
        }
    }
    if (request == null)
        alert("Error creating request object!");
    else
        return request;
}
function send() {
    var val = document.getElementById("name");
    var val2 = document.getElementById("option");
    send = "name=" + val;
    send = "&option=" + val2;

    Post_send.open("POST", "update.html", true);
    Post_send.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    Post_send.send(send);
}
</script>

<form name="form" method="post">
<input type=text size=10 name=name value='messagein'>
<input type=text size=10 name=option value='what_s message'>
<input type=button value=전송 onclick=send()>
</form>

ASP.NET을 하면서 되도록이면 서버컨트롤을 사용하지 않으려 노력하고있는데 이는 서버에 무리를 조금이라도 덜기 위해서 였다..

그렇다면 비동기 통신은 어떻게 되는 것일까 사용자 SCRIPT를 사용하니 성능은 오직 client의 컴퓨터 성능에 달린걸까? 아니면 수만의 client와 채팅을 해야하는 server에 있는걸까?

어찌 되었든 다이나믹과 하나의 페이지에서 모든걸 다할수 있다면 사용자 입장에서 편리하다면 개발자들이 마다할수가 없지 않는가?

어찌되었던 다시 Prototype으로 돌아오면 framework라는 말이 실감 날만큼 정교하지만 헛점도 따르며 공개되는 library에 목메게되고 소스를 뒤집어 업으면서 추가하는 method들에 눈이 빠진다.

우선 처음 Prototype 을 접하고 소스를 보았을때 이게 뭐가 했다.. 소스의 구조가 내가 알고 있는 javascript와는 틀렸다.. 조금씩들어오는 method와 연산자 object property 들이 알수 없는 연사자($)와 대입자 ( : = { } )의 나열이 였다.. 그런대 그건 필인이 JSON을 알지 못했기 때문이다.

JSON 구조로 살펴보고 이해하면서 Prototype script를 조금씩 이해할수 있었다..

name : value 의 쌍으로 이루어진 collection 타입 : {}, [] 들의 node 구조들 엄청나게 복잡한 Array.method들 apply, arguments,push,shift,concat의 기능함수와 호출함수들의 얽힘들...

그리고 이어지는 script.aculo.us effects.js ... WoW OTL이다.

Dom의 XPath 는 둘째 치고 $ <= 이 method인지 컨트롤인지 모를 개체는 무엇인가?

난 무식하게
function $(ID)
{
var obj =document.getElementById(ID);
return objj;
}
를 만들었다..

근데 $이게 이처럼 단순한게 아니라는 것을 알수 있었다..

내가 만든 함수는 단일요소 만들 가질수 있지만 $()함수는 다중요소를 함수안으로 가지고 올수있다.

그런데 아무리 찾아봐도 $()method는 찾을수 없었다.. 검색으로 보두 뒤졌는데..

어떻게 $()함수가 만들어지는 것인가?...