[Javascript] 브라우저 버전 체크 & Text 클립보드(Clipboard) 복사하기

[Javascript] 브라우저 버전 체크 & Text 클립보드(Clipboard) 복사하기

안녕하세요. 갓대희 입니다. 이번 포스팅은 [ Javascript 브라우저 버전체크, 클립보드 복사 ] 입니다. : ) 

브라우저 버전, 종류 체크

▶ 브라우저 버전 체크 방법

    var BrowserVersionCheck = function() {
        var word;
        var versionOrType = "another";
        var ieName = navigator.appName;
        var agent = navigator.userAgent.toLowerCase();
        
        /*** 1. IE 버전 체크 ***/
        // IE old version ( IE 10 or Lower )
        if ( ieName == "Microsoft Internet Explorer" ){
            word = "msie ";
        }else{
            // IE 11
            if( agent.search("trident") > -1 ) word = "trident/.*rv:";
            // IE 12  ( Microsoft Edge )
            else if( agent.search("edge/") > -1 ) word = "edge/";
        }
    
        var reg = new RegExp( word + "([0-9]{1,})(\\.{0,}[0-9]{0,1})" );
        if ( reg.exec( agent ) != null )
        versionOrType = RegExp.$1 + RegExp.$2;
        
        /*** 2. IE가 아닌 경우 브라우저 체크 ***/
        if( versionOrType == "another" ){
            if (agent.indexOf("chrome") != -1) versionOrType = "Chrome";
            else if (agent.indexOf("opera") != -1) versionOrType = "Opera";
            else if (agent.indexOf("firefox") != -1) versionOrType = "Firefox"; 
            else if (agent.indexOf("safari") != -1) versionOrType = "Safari";
        }
        return versionOrType;
    };

▶ text를 클립보드로 복사

 - 기본적으로 IE에서는 window.clipboardData.함수를 사용하여 text를 클립보드로 복사할 수 있다.

1. 클립보드로 텍스트를 복사

window.clipboardData.setData("Text", "복사하고 싶은 Text"); 

2. 클립보드로 부터 복사된 내용을 가져올때

var 변수명 = window.clipboardData.getData("Text");

3. 발췌한 글뒤에 꼬리표 붙일때.

var txt = window.clipboardData.getData('Text');

txt = txt + '\r\n(출처 : 갓대희의 작은공간 )\r\n';

window.clipboardData.setData('Text', txt);

하지만 위의 window.clipboardData.함수가 작동하지 않는 경우가 있다.

 - IE의 특정 버전

 - 크롬

 - 파이어폭스

 - etc....

이럴땐 prompt창을 호출하여 복사하기를 유도 할 수도 있다.

ex) prompt("Ctrl+C를 눌러 클립보드로 복사하세요", "갓");

이를 모두 고려하여 클립보드 복사 스크립트를 작성해 보자.

▶ 최종 text 클립보드 복사 script

 - 브라우전 버전 체크 활용하여 IE10 이하일때, 이외일때로 구분한다.

    var BrowserVersionCheck = function() {
        var boolean = false;
        var ieName = navigator.appName;
        var agent = navigator.userAgent.toLowerCase();
        
        /*** 1. IE 버전 체크 ***/
        // IE old version ( IE 10 or Lower )
        if ( ieName == "Microsoft Internet Explorer" ){
            boolean = true;
        }else{
            // IE 11
            // 만약 IE11 에서 window.clipboardData.setData가 작동 한다면 true
            // 작동 하지 않으면 false를 return 하여 준다.
            if( agent.search("trident") > -1 ){
                boolean = true;
            }
            // IE 12  ( Microsoft Edge )
            else if( agent.search("edge/") > -1 ){
                boolean = false;
            }
        }
        
        // 이외 브라우저에서는 어차피 작동 하지 않으니 기본값인 false 리턴
        return boolean;
    };
    
    if(BrowserVersionCheck){
        window.clipboardData.setData("Text", "복사하고 싶은 Text");
        alert("해당 URL이 복사 되었습니다. Ctrl + v 하시면 붙여 넣기가 가능합니다.");
    } else{
        temp = prompt("해당 URL을 복사하십시오.", "복사하고 싶은 Text");
    }