-
Javascript, jQuery 2020‧07‧22
카카오톡 간편 로그인 2.0 팝업창 띄웠을 때 부모창 overflow hidden 이슈
카카오톡 간편 로그인 2.0의 경우 팝업창으로 로그인을 띄우면 window.open 으로 로그인 창이 뜬다. 이 때 로그인 진행을 하지 않고 그대로 팝업창을 닫으면 본창이 스크롤이 사라져 있음을 발견할 수 있다.이 것은 팝업창으로 로그인 폼 띄울 때 카카오톡 간편 로그인 자바스크립트에서 html과 body에 overflow : hidden 스타일을 강제로 넣기 때문이다. 그래서 로그인이 성공하여 팝업창이 닫히면서 본창에 이벤트를 […]
-
Javascript, jQuery 2017‧10‧16
JS-현재 위치(지오로케이션) 구글맵 api 에 표시
html5의 지오로케이션(geolocation)을 이용해서 위치를 가져온 후 구글맵에 넣는 코드 html에 아래 엘리먼트를 추가해 준다. <div id="map-canvas"></div> 자바스크립트 부분에 아래 코드를 넣어준다. window.onload = getLocation; function getLocation(){ if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(locationSuccess, locationError, geo_options); }else{ console.log("지오 로케이션 없음") } }; // getLocation var latitude, longitude; function locationSuccess(p){ latitude = p.coords.latitude, longitude = p.coords.longitude; initialize(); } // locationSuccess function […]
-
Javascript, jQuery 2017‧10‧16
JS-(페이스북 API) access token 가져오기
페이스북 API를 이용해서 개발하려고 할 때 access token을 요구한다. 개인 인증이 있고, APP 인증이 있다. 두 용도는 다르다. 개인의 아이디의 친구 목록이나 포스팅을 가져오려면 개인 인증을 이용하고, APP은 아시다시피 페이스북의 APP이다. 그 앱이 게임에 들어가거나 소셜 로그인하거나 하는 운영하는 APP의 사용자들을 대상으로 취하는 용도이다. 개인용 인증 (단! 로그인된 상태여야 한다.) FB.getLoginStatus(function(response) { if (response.status === […]
-
Javascript, jQuery 2017‧03‧02
자바스크립트를 이용해 위도,경도를 주소로 변환하기
위도 경도 데이터는 있는데 이를 주소명, 지역명으로 변환하고 싶을 때 사용한다. API 키 발급과 정보 : https://developers.daum.net/services/apis/local/geo/coord2addr var lon = '경도'; var lat = '위도'; $.ajax({ url: 'https://apis.daum.net/local/geo/coord2addr?apikey=발급받은API키&longitude=' + lon + '&latitude=' + lat + '&inputCoordSystem=WGS84&output=json', type: 'GET', cache: false, context: {}, crossOrigin: true, success: function(data) { var jsonObj = $.parseJSON(data); var contentText = document.getElementById('content'); contentText.innerHTML […]
-
Javascript, jQuery 2016‧10‧26
JS - 유튜브 영상 (음소거,자동재생 상태로) 다중 삽입하기
웹사이트에 유튜브 영상을 여러개 삽입하여 자동 재생시키되 음소거를 시키고 싶을 경우가 있다. 어떻게 보면 간단할 듯 한데 실제로 적용되기 까다롭다. 이유는 음소거 때문이다. 그냥 html 문서에 iframe으로 <iframe src="http://www.youtube.com/embed/영상ID"> 이런식으로 여러개 놓고 자동재생을 시키고 싶을 때는 영상ID 뒤에 ?autoplay=1 파라미터를 추가하고 반복이면 다시 뒤에&loop=1&playlist=영상ID를 추가해주면 여러 개의 영상이 자동 재생되어 반복 재생된다. 이러한 방식을 <iframe> 태그를 사용하여 IFrame […]
-
Javascript, jQuery 2015‧12‧24
JS-페이스북 공유한 뒤 공유 여부값 가져오기
페이스북을 이용해서 게시물을 공유하게 한 뒤 공유가 되었거나 실패하였는지 확인하는 코드가 필요할 때가 있습니다. 이 코드를 작성하기 앞서 페이스북 개발자 센터에서 APP ID를 발급 받으셔야합니다. APP ID 발급 방법은 구글에서 'facebook app id'만 검색해도 쉽게 설명이 잘 나와있으니 참고하신 후 APP ID를 발급 받아놓습니다. 아래는 id 값 sharebutton 을 가진 공유버튼을 클릭하면 페이스북 공유 창이 […]
-
Javascript, jQuery 2015‧10‧08
구글 맵 - 일정 범위 다중 마커 합산한 Cluster(클러스터) 기능
구글 맵을 이용해서 마커를 찍을 경우가 있는데 이게 여러 개의 마커를 사용할 때가 있습니다. 그런데 여러개의 마커를 사용하게 되면 지도를 zoomout 을 많이 했을 때 엄청나게 많은 마커들이 집중되서 지저분해 보이게 됩니다. 그래서 만들어진 것이 cluster 입니다. 이 것은 여러개의 마커들이 어느 정도 범위안에 속하면 마커를 합치고 합친 갯수를 보여주게 됩니다. 이런 식으로 합쳐 나오게 […]
-
Javascript, jQuery 2015‧02‧23
모바일웹에서 기상청 날씨(실황) api 가져와서 파싱해서 노출까지 자바스크립트로 만들기
<포스팅 업데이트 : 2017년 4월 11일> 다시한번 해당 내용으로 data.go.kr 문의를 보냈습니다. 원문은 https://www.data.go.kr/information/QNA_0000000000014129/qna.do 이 곳을 참고해보시면 됩니다. 결론부터 말씀드리자면 api를 제공하는 입장에서 크로스도메인은 보안상의 이유로 허용할 수 없다고 합니다. 라이브러리가 안되는건 다른 라이브러리를 사용해서든 크로스도메인을 스스로 알아서 해결하여 사용하라는 이야기입니다. 참고로 전 다른 라이브러리들을 이용해서 시도해 보았으나 이 원리가 yahoo api를 거쳐 다녀오는 형태의 라이브러리들인데 […]