[HTML5] audio, video tag 지원 유무 확인

Posted by Find my true self Fimtrus
2014.04.28 18:17 Programming/Hybrid App

if ( document.createElement("video").canPlayType ) {console.log("true")} //지원
else { console.log( "false" );} //미지원
이 댓글을 비밀 댓글로

[Javascript] 아이폰에서 브라우저 백버튼 클릭시 새로고침 안되는 문제.

Posted by Find my true self Fimtrus
2013.12.18 15:32 Programming/Hybrid App

크롬기반 브라우저 및 안드로이드에서는 

브라우저 백버튼을 클릭하였을 때, 이전 페이지 정보를 refresh 한다.

하지만 IOS 사파리의 경우 그렇지 않다.

페이지에 대한 모든 정보를 사파리에서 저장하고 있기 때문이다.

흔히 Hybrid App, Single Page Web 을 구현하게 되면(일반 web도 마찬가지...),

간혹 로그인 체크라던가, 필요한 데이터를 받기 위해 document 의 ready에서 ajax를 통해 API들을 요청하게 된다.

 하지만 아이폰(사파리)에서 브라우저 백버튼을 눌렀을 때, ready 내의 fuction이 정상 동작하지 않게 된다.

이를 해결하기 위해선 

window 객체의 onpageshow라는 이벤트를 구현해야 아이폰에서 브라우저 백버튼을 눌렀을 때도, 원하는 결과를 얻을 수 있다.


//javascript 만을 이용한 방법
window.onpageshow =  function(event) {
			
			//back 이벤트 일 경우
	if ( event.persisted) {
				
		//====TODO : 
	}
			
}
//jQuery를 이용한 방법
$(window).bind("pageshow", function(event) {
	
	//back 이벤트 일 경우
	if ( event.originalEvent && event.originalEvent.persisted) {
		
		//TODO : ======
	}
	
});


jQuery를 이용할 때, event.originalEvent를 체크하는 이유는

브라우저에서 발생시킨 event 내에 event.originalEvent 가 없을 수 있기 때문에

존재하는지 체크를 먼저하게 된다.

그리고 persisted 를 통해, 이 이벤트가 백버튼(실제로는 continue의 느낌이 강함..)에 대한

이벤트인지 확인 할 수 있다(boolean 형태)


이 댓글을 비밀 댓글로

[Javascript] input file 이미지 미리보기, 썸네일 보기, Thumbnail

Posted by Find my true self Fimtrus
2013.07.10 14:11 Programming/Hybrid App
/**
  * 이미지 썸네일을 불러오는 function
  * @param html : input 필드의 dom을 인자로 받는다. 물론 타입은 file
  * @param $target : 불러온 이미지를 적용할 jquery 객체.
  **/
function getThumbnail(html, $target) {
	if (html.files && html.files[0]) {
		var reader = new FileReader();
		reader.onload = function (e) {
			$target.css('background-image', 'url(\"' + e.target.result + '\")');
		}
		reader.readAsDataURL(html.files[0]);
	}
}


냉무.
이 댓글을 비밀 댓글로
  1. 안녕하세요 혹시 위 소스 사용법좀 알수있을까요?
    아래와 같이 코딩해서 테스트해보니 html.files 에서 에러가 발생하더라구여
    dom 객체를 어떤식으로 넘겨 주어야 하나요?
    감사합니다. 좋은하루되세요.
    ===============================================
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    function getThumbnail(html, $target) {
    if (html.files && html.files[0]) {

    var reader = new FileReader();
    reader.onload = function (e) {
    $target.css('background-image', 'url(\"' + e.target.result + '\")');
    }
    reader.readAsDataURL(html.files[0]);
    }
    }
    function filechange(){
    var $target = $("#test");
    var html = document.getElementById("file1");
    getThumbnail(html,$target);

    }
    </script>
    <div id="test"></div>
    <input id="file1" type="file" onchange="javascript:filechange();">
    • 제가 이제 봤네요...한동안 너무 바쁘게 지내서 블로그를 돌볼 시간이 없었어요.

      해결하셨다고 생각하지만 답변드릴께요.

      getThumbnail 이라는 function은 두개의 인자를 받습니다.

      첫번째는 input tag의 input document 객체, 즉 document.querySelector('input') 하였을때 나오는 객체를 말합니다.
      file dom을 말하는거죠..
      두번째인자인 target은 jquery 객체를 말하는건데....
      소스 보시면 알겠지만 읽어 들인 파일의 thumbnail을 표시할 객체입니다.
      img tag일수도 있고, background를 주기 위한 division일 수도 있습니다.
      저는 division에 background-image로 적용하였습니다.

      결론을 말씀드리면, html은 input tag의 dom 객체를 넘기면 됩니다.

      더 궁금하신게 있으시다면 답변바랍니다.

[Android] WebView(웹뷰) 신뢰할 수 없는 인증서 문제 해결.

Posted by Find my true self Fimtrus
2013.05.14 17:17 Programming/Android

https 사이트를 접속하려고할 때, 서버측 인증서에 문제가 없을 경우에는 발생하지 않지만, 인증서가 신뢰할 수 없을 때, 찾을 수 없는 페이지라는 에러를 받게 된다.

간단하게 WebView Setting으로 해결할 수 있다.

우선 WebClient를 만든다.

public class WebClient extends WebViewClient {}

그리고 Override Method 중, onReceivedSslError 를 추가한다.

public class WebClient extends WebViewClient {
@Override
public void onReceivedSslError(WebView view,
SslErrorHandler handler, SslError error){
handler.proceed();
}
}

그리고 WebView에 set 해주면!!.

mWebView.setWebViewClient(new WebClient());

정상적으로 동작하는 웹뷰를 볼수 있다.

이 댓글을 비밀 댓글로