웹표준 Javascript 로 Flash Object 생성시 유의 사항

HTML 을 이용하지 않고 순수한 Javascript 만으로 Flash Object 를 생성할 때 유의해야 할 사항이다

1. IE6,7 인 경우 : innerHTML 방식

2. 그 외의 경우 : DOM Create 방식 (IE6,7 에서는 동작하지 않는다)

3. Chrome, Safari 는 object attribute 의 동적 변경이 안된다.

Example:

if (!TOBE.FlashPlayer) {

    TOBE.FlashPlayer = function(id, left, top, right, bottom, parent){

        TOBE.Component.call(this, id, left, top, right, bottom, parent);

        this._sysclass = "flashplayer_outer";

    };

    

    var _pFlash = TOBE.FlashPlayer.prototype = TOBE.$createPrototype(TOBE.Component);

    

    // overide TOBE.Object

    _pFlash._Type = "TOBEFlashPlayer";

    _pFlash._TypeName = "FlashPlayer";

    

    // local member

    _pFlash._objElem = null;

    _pFlash._objId = null;

    

    // flash properties

    _pFlash.ReadyState = null;

    

    // -- All Componets overide this function

    _pFlash.__createInnerElement = function(){

        if (this._doc && this._outer_elem) {

            var doc = this._doc;

            this._inner_elem = doc.createElement("div");

            this._inner_elem.className = "flashplayer_inner";

            this.$setInnerPosition();

            this._initInner();

            

            var objId = this._objId = this.id + "." + Math.ceil(Math.random() * 4000);

            

            if (this.$forInnerHTML()) {

           

           this._outer_elem.appendChild(this._inner_elem);

           this._inner_elem.innerHTML = this.$makeObjectHTML(objId);

           

} else {

this._objElem = this.$createObject(objId);

this._initProperties();

this._inner_elem.appendChild(this._objElem);

this._outer_elem.appendChild(this._inner_elem);

}

        }

    };

    // ==============================================================================

    // Private

    // ==============================================================================        

    //for IE6,7

    _pFlash.$forInnerHTML = function() {

    if (TOBE.Browser == "IE"

&& (TOBE.BrowserVersion == 6 || TOBE.BrowserVersion == 7)) {

return true;

} else {

return false;

}

    };

    //for IE6,7

    _pFlash.$makeObjectHTML = function(objId) {

var innerHtml = '<object id="' + objId + '" name="' + objId + '"';

innerHtml += ' width="' + this._clientRect.getWidth() + '" height="' + this._clientRect.getHeight() + '"';

innerHtml += ' type="application/x-shockwave-flash"';

if (this.codebase) {

innerHtml += ' codebase="' + this.codebase + '"';

}

innerHtml += '/>';

if (this.movie) {

innerHtml += '<param name="movie" value="' + application.$getServiceLocation(this.movie) + '"/>';

}

if (this.flashvars) {

var value = this.$checkVars(this.flashvars.replace("&amp;", "&"));

innerHtml += '<param name="flashvars" value="' + value + '"/>';

}

if (this.playing) {

innerHtml += '<param name="playing" value="' + this.playing + '"/>';

}

innerHtml += '<param name="wmode" value="transparent"/>';

innerHtml += "</object>";

return innerHtml;

    };

    _pFlash.$getObj = function() {

if (this._objElem) {

return this._objElem;

}

return document.getElementById(this._objId);

    };

    

_pFlash.$createObject = function(objId) {

var doc = this._doc;

var objElem = doc.createElement("object");

objElem.setAttribute("id", objId);

objElem.setAttribute("name", objId);

objElem.setAttribute("type", "application/x-shockwave-flash");

objElem.setAttribute("width", this._clientRect.getWidth());

objElem.setAttribute("height", this._clientRect.getHeight());

this.$createParam(objElem, "wmode", "transparent");

return objElem;

};

_pFlash.$findParam = function(objElem, name) {

var children = objElem.childNodes;

for (var i = 0; i < children.length; i++) {

var child = children[i];

if (child.name.toLowerCase() == name.toLowerCase()) {

return child;

}

}

return null;

};

_pFlash.$createParam = function(objElem, name, value) {

var doc = this._doc;

var paramElem = doc.createElement("param");

paramElem.setAttribute("name", name);

paramElem.setAttribute("value", value);

objElem.appendChild(paramElem);

};

// param 객체가 존재하지 않는다면 생성하여 설정

_pFlash.$setParamValue = function(objElem, name, value) {

var paramElem = this.$findParam(objElem, name);

if (paramElem) {

paramElem.setAttribute("value", value);

} else {

this.$createParam(objElem, name, value);

}

};

_pFlash._initProperties = function() {

this.__apply_codebase();

this.__apply_data();

this.__apply_type();

this.__apply_movie();

this.__apply_flashvars();

this.__apply_playing();

};

_pFlash.$checkVars = function(flashvars) {

var varArr = flashvars.split("&");

var rtnVal = "";

        for (var i = 0; i < varArr.length; i++) {

            var varItem = varArr[i];

            if (varItem && varItem.trim().length > 0) {

           var idx = varItem.indexOf("=");

var name = varItem.substring(0, idx);

var value = varItem.substring(idx + 1);

           rtnVal += "&" + name + "=" + application.$getServiceFullUrl("value);

            }

        }

        return rtnVal;

};

    

    // ==============================================================================

    // Properties

    // ==============================================================================    

    _pFlash.codebase = null;

_pFlash.set_codebase = function(v) {

this.codebase = v;

this.__apply_codebase();

};

_pFlash.__apply_codebase = function() {

if (this.$getObj() && this.codebase) {

this.$getObj().setAttribute("codebase", this.codebase);

}

};

_pFlash.data = null;

_pFlash.set_data = function(v) {

this.data = v;

this.__apply_data();

};

_pFlash.__apply_data = function() {

if (this.$getObj() && this.data) {

var path = application.$getServiceLocation(this.data);

this.$getObj().setAttribute("data", path);

}

};

_pFlash.type = null;

_pFlash.set_type = function(v) {

this.type = v;

this.__apply_type();

};

_pFlash.__apply_type = function() {

if (this.$getObj() && this.type) {

this.$getObj().setAttribute("type", this.type);

}

};

    

    _pFlash.movie = null;

    _pFlash.set_movie = function(v){

        this.movie = v;

        this.__apply_movie();

    };

    _pFlash.__apply_movie = function() {

if (this.$getObj() && this.movie) {

var path = application.$getServiceFullUrl("this.movie);

this.$getObj().setAttribute("data", path);

var paramElem = this.$findParam(this.$getObj(), "movie");

if (paramElem) {

paramElem.setAttribute("value", path);

this.$getObj().movie = path;

} else {

this.$createParam(this.$getObj(), "movie", path);

}

}

};

    

    _pFlash.flashvars = null;

_pFlash.set_flashvars = function(v) {

this.flashvars = v;

this.__apply_flashvars();

};

_pFlash.__apply_flashvars = function() {

if (this.$getObj() && this.flashvars) {

var value = this.$checkVars(this.flashvars.replace("&amp;", "&"));

var paramElem = this.$findParam(this.$getObj(), "flashvars");

if (paramElem) {

paramElem.setAttribute("value", value);

this.$getObj().flashvars = value;

} else {

this.$createParam(this.$getObj(), "flashvars", value);

}

}

};

    

    _pFlash.playing = null;

_pFlash.set_playing = function(v) {

this.playing = v;

this.__apply_playing();

};

_pFlash.__apply_playing = function() {

if (this.$getObj() && this.playing) {

var paramElem = this.$findParam(this.$getObj(), "playing");

if (paramElem) {

paramElem.setAttribute("value", this.playing);

this.$getObj().playing = this.playing;

} else {

this.$createParam(this.$getObj(), "playing", this.playing);

}

}

};

    // ==============================================================================

    // Method

    // ==============================================================================

    _pFlash.isInstalled = function(){

        

// TODO Object 엘리먼트에서 발생하는 onerror 를 이용하여 설치 여부 판단하여 구현 필요

// http://bluehist.tistory.com/15

//        TOBE._observeEvent(this._value_elem, "focus", function(e) {

//            thisP._isFocused = true;                        

//        });

        

        return false;

    };

    _pFlash.play = function() {

    if (TOBE.Browser == "IE") {

this.$getObj().play();

}

//-- FF 지원불가

    };

    _pFlash.stop = function() {

    if (TOBE.Browser == "IE") {

this.$getObj().stop();

}

//-- FF 지원불가

    };

    _pFlash.callMethod = function(){

        var name = arguments[0];

        

        var objName = "this.$getObj()." + name;

        switch (arguments.length) {

            case 2:

                return eval(objName + "(arguments[1])");

                break;

            case 3:

                return eval(objName + "(arguments[1], arguments[2])");

                break;

            case 4:

                return eval(objName + "(arguments[1], arguments[2], arguments[3])");

                break;

            case 5:

                return eval(objName + "(arguments[1], arguments[2], arguments[3], arguments[4])");

                break;

            case 6:

                return eval(objName + "(arguments[1], arguments[2], arguments[3], arguments[4], arguments[5])");

                break;

            case 7:

                return eval(objName + "(arguments[1], arguments[2], arguments[3], arguments[4], arguments[5], arguments[6])");

                break;

            case 8:

                return eval(objName + "(arguments[1], arguments[2], arguments[3], arguments[4], arguments[5], arguments[6], arguments[7])");

                break;

            case 9:

                return eval(objName + "(arguments[1], arguments[2], arguments[3], arguments[4], arguments[5], arguments[6], arguments[7], arguments[8])");

                break;

            case 10:

                return eval(objName + "(arguments[1], arguments[2], arguments[3], arguments[4], arguments[5], arguments[6], arguments[7], arguments[8], arguments[9])");

                break;

            default:

                return eval(objName + "()");

        }

    };

}