(str.replace(/[^0-9]/g, '').+ "").replace(/.(?=(?:.{3})+$)/g, '$&,')) 

+ str.replace(/[0-9]/g, ''); //숫자 [,] 변환 + 문자

숫자 세자리 콤마 후 문자 숫자 합치기

SDK 도입과 활용에 대한 이해

1. 왜 SDK 를 써야 하는가 ?
2. iframe 을 사용하는 이유는 ?
3. 부모창 측의 송수신 방법
4. 자식창 측의 송수신 방법

1. 왜 SDK 를 써야 하는가 ?

CORS (Cross-Origin Resource Sharing) 비교적 최근 브라우져는 보안 상의 이유로 외부 출처의 컨텐츠를 가져오는데 제약을 둔다. 외부 사의 컨텐츠를 사용하는 중계서비스 의 특성상 이는 감수해야 할 이슈이며, 이를 회피하기 위해 외부사는 SDK를 사용하여 본 서버 와 통신을 한다.

2. iframe 을 사용하는 이유는 ?

중계서비스의 특성 상 외부 게임을 내부로 런칭 한다. 테두리에는 중계사, Portal 이 있고, 내부에 컨텐츠 웹게임이 노출되는 형태로 제공한다.

3. 부모창 측의 송수신 방법

부모창의 송수신

$(document).ready(function() {
    //addEventListener 로 자식창에서 발생하는 이벤트를 해당 function 으로 받겠다는 선언을 한다. 
    window.addEventListener('message', _receiveMessage, false);  
});

// 수신 :: 이벤트 발생시 실행시킬 callback function 을 지정한다.
    var _functions = {
        'matchedFunction' : _matchedFunction
    };
    function _receiveMessage(event) {
        var postMessageData = event.data;
        if (!postMessageData) {
            return;
        }
        var targetSrc = document.getElementById("gameIFrame").src;
        if (targetSrc === undefined || targetSrc.indexOf(event.origin) !== 0) {
            return;
        }

        var postMessageDataObject = _parseRequest(postMessageData, event.origin);

        if (!postMessageDataObject.header) {
            return;
        }

        var functionName = postMessageDataObject.header.functionType; // 호출할 function name
        _functions[functionName](postMessageDataObject); // 실행할 function
    }
    function _matchedFunction(postMessageData) {
        var ver = postMessageData.head.version;        
        $.ajax({
            url: "/sdk/" + ver,
            type: 'POST',
            data:JSON.stringify(postMessageData),
            dataType: "json",
            timeout: 5000,
            contentType: "application/json; charset=utf-8"
        }).done(function(response) {            
            document.getElementById("gameIFrame").contentWindow.postMessage(response, postMessageData.body.requestOrigin);
        }).fail(function(err) {
            console.log(err);
        });
    }

 // 송신 :: 서버를 호출해 받은 response 를 자식 iframe 에 전송한다. 
 document.getElementById("gameIFrame").contentWindow.postMessage(response, postMessageData.body.requestOrigin);

4. 자식창측의 송수신 방법

// 우선 sdk 를 import 한다
<script src="/js/sdk/sdk.js"></script>
    // 선언
    var sdk = new SDK();
    // 송신 :: startFunction의 parameter 에 송신할 정보를 넣는다.
    // 수신 :: callbackFunction 에 수신할 정보와 처리할 방법을 넣는다.
    sdk.startFunction(document.getElementById('param1').value, callbackFunction);  
    function callbackFunction(data, err) { 
        if (!err) {
            alert(data);
        }
    };

function setUrlToParam(param, name) {
    var url = window.location.href;
    url = url.replace('#', '');
    if (url.indexOf('?') > 0) {
        window.location.href = url.slice(0, url.indexOf('?')) + '?'+ name + '=' + param;
    } else {
        window.location.href = url + '?'+ name + '=' + param;
    }
}

url parameter 를 줌

function moveLoop(pos, playerPos) {
    setTimeout(function() {
        playerPos++;
        moveBoardPos(playerPos);
        if (playerPos < Number(pos)) {
            moveLoop(pos, playerPos);
        }
    }, 300);
}

0.3초 간격으로 moveBoardPos 를 호출

JSON.parse(JSON.stringify(datas))

$('select[name="select"]').off('change');
$('select[name="select"]').on('change', function() {
});

function changeSelectToInput($id) {
  $id.replaceWith($('<input />').attr({
    type: 'text',
    id: $id.attr('id'),
    name: $id.attr('name'),
    value: $id.val(),
    class: 'readonly',
    readonly: 'readonly'
  }));
}

$(window).scroll(function () {
  var scrollHeight = $(document).height();
  var scrollPosition = $(window).height() + $(window).scrollTop();
  if ((scrollHeight - scrollPosition) / scrollHeight != 0) {
    bottom();
  } else {
    top();
  }

$('.numbersOnly').keyup(function () {
    this.value = this.value.replace(/[^0-9\.]/g, '');
});

input 클래스 선언 후 사용 .

숫자를 제외한 입력은 삭제된다.