JSONP – 원격 데이터 전송

다른 도메인 또는 서버의 데이터를 가져오거나 화면에 표시할때 가장 많이 사용해 온 것이 IFRAME과 XMLHttpRequest인데 최신 브라우저들은 보안 문제로 이에 대한 제한 장치를 두고 있다. 바로 'Cross Domain' 이슈인데, 다른 도메인의 내용을 호출할때 차단해버리는 것이다. 즉, IFRAME과 XMLHttpRequest 는 사실상 같은 도메인 하에서만 사용할 수 있게 되었다고 볼 수있다. 이러한 Cross Domain 이슈 없이 다른 도메인의 데이터를 전송해서 받는 방법으로 JSONP 가 있다. JSONP는 ' XMLHttpRequest'를 사용하지 않고 'script' 태그를 사용하여 다른도메인의 파일을 읽는 방식을 사용한다. 1.처리할 함수 만들기 function...

붙여넣기(Paste)시 HTML 제거

Input 박스 또는 Editable Element에 복사/붙여넣기 할 때 HTML이 제거된 Plain Text만 붙여넣는 JavaScript 코드 object.addEventListener("paste", function(e){ // 기존 Paste process 중지 e.preventDefault(); // Clipboard로부터 Text 추출 var text = (e.originalEvent || e).clipboardData.getData('text/plain'); // 웹페이지가 아닌 html 코드 자체를 복사했을 경우 text가 추출되지 않기 때문에 별도로 다시 textContent 추출 var temp = document.createElement("div"); temp.innerHTML = text; document.execCommand("insertHTML", false, temp.textContent); });

클립보드로 복사하기 – Pure JavaScript

JavaScript에서 문자열(String)을 Clipboard로 저장(복사)하는 간단한 함수가 내장되어 있을 것으로 생각했는데, 찾지 못했다.(있을 수도....) Textarea 에서 마우스로 선택된(Select) 문자열이 있을 경우 간단히 'document.execCommand('copy')' 함수를 사용하면 되지만, JavaScript 코드 상의 문자열을 Clipboard로 저장 하려면, 별도의 작업이 필요하다.이에 대해 잘 정리된 함수를 아래에서 참고 할 수 있다. https://techoverflow.net/2018/03/30/copying-strings-to-the-clipboard-using-pure-javascript/ function copyStringToClipboard (str) { // Create new element var el = document.createElement('textarea'); // Set value (string to be copied) el.value = str; // Set non-editable to avoid focus and move outside of view el.setAttribute('readonly', '');...

Json을 활용한 Ajax response(php & javascript)

Ajax request를 받은 Server Side의 php 파일에서 필요한 처리를한 한 후 결과 값을 넘겨 줄 때 jason을 활용하는 방법 PHP $resultObj->result = "success"; $resultObj->message = "The comment has been updated successfully"; $result = json_encode($resultObj); echo $result; JavaScript var result = JSON.parse(response); if(result.result == "success") { console.log(result.message); } else { console.log(result.message); }