dBack

Jsonp 로 Cross Domain 통신 시

Post 통신으로 데이터를 넘기고 싶을 때,

data 값에 String 값으로 세팅하여 값을 넘긴다.

ex)

$.ajax({

url: url,

method: "POST",

dataType: 'jsonp',

jsonp: "callback",

data: 'locale=KR&' +

 'language=ko&' + 

 'deviceCode=TEST-K100&' + 

 'salesCode=TESTK100',

success: function (data, textStatus, jqXHR) {

console.log('success.');

},

error: function (jqXHR, textStatus, errorThrown) {

console.log('error: ', jqXHR);

}

});

사용자 개인 정보를 서버에 전송할 때 HTTPS로 적용해 달라는 요청이 들어온 적이 있었다.

그래서 주민등록번호나 회원 아이디, 패스워드 등을 서버로 전송하는 페이지에 한해서 HTTPS로 적용되게 URL을 변경하였다.

헌데, 다음과 같은 문제가 발생하였다.

위와 같이 휴대폰 인증 버튼 클릭 시 서버로 요청을 보내지도 못하고, ajax 에러 메시지가 출력된다.

error, No Transport

에러 메시지가 출력되는 원인은 회원 정보 입력 페이지 접근 시에는 HTTPS 프로토콜로 접근하였지만 휴대폰 인증 시에는 HTTP로 요청을 보냈기 때문이다.

ajax에서는 HTTPS, HTTP도 크로스 도메인으로 구분하기 때문이다.

지금까지 크로스 도메인 문제는 메인 도메인과 서브 도메인, 도메인은 같지만 포트 번호가 다를 경우에만 해당 되는 줄 알았다.

허나 ajax는 프로토콜이 서로 다를 경우에도 크로스 도메인으로 구분한다.

결국 위의 문제는 휴대폰 인증 시에도 HTTPS로 요청을 보낼 수 있도록 수정하여 문제를 해결하였다.

또 다른 해결 방법은 JSONP를 이용하는 것이 있지만 굳이 쓸 이유가 없어서 적용해 보진 않았다.

var fromHistoryBack = false;
var myHistory;
try {
    myHistory = JSON.parse(sessionStorage.getItem('myHistory'));
} catch (e) {};
if (myHistory) {
    if (myHistory[myHistory.length-1].href == window.location.href
            && myHistory[myHistory.length-1].referrer == document.referrer) {
        alert('새로고침 되었습니다.');
    } else {
        if (myHistory.length > 1) {
            if (myHistory[myHistory.length-2].href == window.location.href
                    && myHistory[myHistory.length-2].referrer == document.referrer) {
                fromHistoryBack = true;
                myHistory.pop();
                sessionStorage.setItem('myHistory', JSON.stringify(myHistory));
            }
        }
        if (myHistory.length > 10 && !fromHistoryBack) {
            myHistory.shift();
            sessionStorage.setItem('myHistory', JSON.stringify(myHistory));
        }
        if (!fromHistoryBack) {
            myHistory.push({
                href: window.location.href,
                referrer: document.referrer
            });
            sessionStorage.setItem('myHistory', JSON.stringify(myHistory));
        }
    }
} else {
    var newHistory = [{
        href: window.location.href,
        referrer: document.referrer
    }];
    sessionStorage.setItem('myHistory', JSON.stringify(newHistory));
}
console.debug('fromHistoryBack:', fromHistoryBack);

history를 쿠키나 브라우저 스토리지에 별도로 축적하고 이를 비교해가며 뒤로가기 기능으로 랜딩된 페이지인지를 판단하는 소스. 단, 반드시 뒤로가기만 걸러내는것은 아니고 이전 페이지의 주소를 직접 호출하는 방식에도 반응하는 한계가 있다.

새창을 띄우고 기존 창을 닫기 위해

window.close(); 함수를 사용하게 되는데 이럴때  지금 보고 있는 창을 닫을지를 확인하는 경고창이 뜬다.

이 경고창을 띄우지 않고 현재 보고 있는 윈도우창을 닫을려고 할때 아래 소스를 사용하면 된다.

window.opener='nothing';

window.open('','_parent','');

window.close();

facebook 확산 캐싱 지우기

https://developers.facebook.com/tools/debug/og/object/

function fnSpecDpInit (text, order) {

var specTagObj = $('#specTagName' + order);

var specTagDpObj = $('#specTagDpName' + order);

specTagObj.on('keyup keypress', function(e) {

specTagDpObj.val(text);

});

}

<input type="text" style="width: 100%" onkeyUp="fnSpecDpInit(this.value, '<c:out value="${status.index +1}"/>');" />

1. radio 버튼 에서 체크된 값 가져오기

var mailTp = $('input:radio[name="mailTp"]:checked').val();

2. radio 버튼 값 체크하기

$('input:radio[name=mailTp]:input[value='+mailTp+']').attr("checked", true);

-----------------------------------------------------------------

...

<tr>

<td WIDTH="13%" class="tb_brw_tt">메일</td>

<td WIDTH="20%" class="tb_w_tt" colspan="3">

<input type="radio" name="mailTp" value="01"> 발송

<input type="radio" name="mailTp" value="02"> 미발송

</td>

</tr>

...

-----------------------------------------------------------------

$('#Text').on('keyup keypress', function(e) {

  var code = e.keyCode || e.which;

  if (code == 13) { 

    e.preventDefault();

    return false;

  }

});

<select class="check">

<option value="one">one</option>

<option value="two">two</option>

</select>

$('.check')

    .val('two')

    .trigger('change');

$(document).ready(function() {

$('body').on("contextmenu", function(e){

return false;

});

$('body').on("dragstart", function(e){

return false;

});

$('body').on("selectstart", function(e){

return false;

});

});