본문 바로가기

Developer

jquery plugin 페이스북 스타일 링크 도우미 [textbox, textarea 링크(URL) 체크하고 이미지 가져오기]

 

페이스 북처럼 URL이 입력되면 하단부에 이미지와 해당 페이지의 제목을 가져오도록 만들어봤습니다…

 

실력이 형편없어서.. 엉성합니다.

완벽한 제품도 아니고요…

 

Textarea에 입력되는 키 값으로 처리해서.. 오류가 있습니다만… 그냥 이런식으로 한다라고 참고만 해 주십시오.

 

 


    plugin 부분의 스크립트입니다.

(function($) {
	$.fn.GetPageInfo = function(settings) {
		var config = {
			"Server": false
			, "ServerUrl": "test.aspx"
			, "SPList": "ListName"
			, "Timeout": "15000"
			, "ImgWidth": "100px"
			, "ImgHeight": "100px"};
		
		var UrlData = null;
		var Timer = null;

		if(settings) $.extend(config, settings);

		this.each(function(){
			jQuery.support.cors = true;
			if(this.tagName && this.tagName.toLowerCase() == "textarea"){
				$(this).keyup(function(e){
					var obj = this;
					setTimeout(function(){
						fnKeyUpEvent(obj);
					}, 2000);
				});
			}
		});

		function fnKeyUpEvent(obj){
			var data = obj.value;
			var filter = /^(http|https):\/\//i;

			if(ValidURL(data)){
				if($("div#divLinker").length <= 0){
					$(obj).after("
loading
"); } else{ $("div#divLinker").css("display", ""); } var url = null; if(data.indexOf("\r\n") > 0){ var tempData = data.split("\r\n"); for(var i = 0; i < tempData.length; i++){ if(tempData[i].length <= 0) continue; url = fnCheckUrlBySpece(tempData[i]); if(url) break; } } else{ url = fnCheckUrlBySpece(data); } if(UrlData != url){ if(Timer != null){ clearTimeout(Timer); Timer = null; $("div#divLinker img#imgLoading").css("display", "none"); } UrlData = url; Timer = setTimeout(function(){ fnAjaxCall(); }, 2000); } } else $("div#divLinker").css("display", "none"); } function ValidURL(str) { var pattern = /(http|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/i if(!pattern.test(str)) { return false; } else { return true; } } function fnAjaxCall(){ var loading = $("div#divLinker img#imgLoading"); var contentArea = $("div#divLinker table"); var strUrl = fnGetUrl(); loading.css("display", ""); contentArea.css("display", "none"); $.ajax({ url: strUrl , async: false , contentType: config.Server ? "application/xml; charset=UTF-8" : "text/html; charset=UTF-8" //, context: document.body , dataType: config.Server ? "xml" : "html" , success: function(data, textStatus, jqXHR){ config.Server ? fnResultServer(data) : fnResultHtml(data); } , error: function(XMLHttpRequest, textStatus, errorThrown){ $("div#divLinker").css("display", "none"); alert(errorThrown); alert(UrlData); } }); } function fnCheckUrlBySpece(data){ if(data.indexOf(" ") > -1){ var tempData = data.split(" "); for(var i = 0; i < tempData.length; i++){ if(tempData[i].length > 0 && ValidURL(tempData[i])){ return tempData[i]; } } } else return data; return ""; } function fnGetUrl(){ if(config.Server){ if( config.ServerUrl.indexOf("_url") > 0){ return config.ServerUrl + encodeURIComponent(UrlData) + "&timeout=" + config.Timeout; } else{ if(config.ServerUrl.indexOf("?") > 0) return config.ServerUrl + "&_url=" + encodeURIComponent(UrlData) + "&timeout=" + config.Timeout; else return config.ServerUrl + "?_url=" + encodeURIComponent(UrlData) + "&timeout=" + config.Timeout; } } else{ return encodeURI(UrlData); } } function fnResultServer(data){ $("div#divLinker img#imgLoading").css("display", "none"); var contentArea = $("div#divLinker table"); contentArea.css("display", ""); var title = $(data).find("Title:first").text(); var description = $(data).find("Description:first").text(); var img = $(data).find("Img:first"); if(img.length > 0){ contentArea.find("img").css("display", ""); contentArea.find("img").attr("src", img.attr("Src")); } else contentArea.find("img").css("display", "none"); if(img.attr("Width") > img.attr("Height")) contentArea.find("img").width(config.ImgWidth); else contentArea.find("img").height(config.ImgHeight); contentArea.find("span#spanTitle").html("" + title + ""); contentArea.find("span#spanBody").text(description); } function fnResultHtml(data){ $("div#divLinker img#imgLoading").css("display", "none"); var contentArea = $("div#divLinker table"); var linker = $(data); contentArea.css("display", ""); var imgFirst = linker.find("img:first"); if(imgFirst.length > 0){ contentArea.find("img").css("display", ""); contentArea.find("img").attr("src",imgFirst.attr("src")); } else contentArea.find("img").css("display", "none"); if(imgFirst.width() > imgFirst.height()) contentArea.find("img").width(config.ImgWidth); else contentArea.find("img").height(config.ImgHeight); contentArea.find("span#spanTitle").text(data.match("(.*?)")[1]); contentArea.find("span#spanBody").text(linker.find("meta[name=description]").attr("content")); } return this; } })(jQuery);

 

 


    Html 파일입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title> new document </title>
		<meta name="generator" content="editplus">
		<meta name="author" content="angeleyes">
		<meta name="keywords" content="angeleyes,testhtml,testjavascript">
		<meta name="description" content="test document">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=8" />

		<style type="text/css">

		</style>

		<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
		<script type="text/javascript" src="pageinfoplugin.js"></script>
		<!--script type="text/javascript" src="http://dev.sencha.com/deploy/dev/docs/resources/ext-base.js"></script>
		<script type="text/javascript" src="http://dev.sencha.com/deploy/dev/docs/resources/ext-all.js"></script-->

		<script language="javascript" type="text/javascript">
		//<![cdata[
			$(document).ready(function() {
				var settings = new Object();
				settings.Server = true;
				settings.ServerUrl = "http://dsg.dev.com/_layouts/Linker.aspx?_url=";
				$("#txtData").GetPageInfo(settings);
			});
			
			function fnFunction(){
				try {
					
				}
				catch(e) {
					alert("test ==> " + e.message);
				}
			}
		//]]>
		</script>
	</head>

	<body>
		<input type="text" id="txtText" value="" />
		<textarea id="txtData" rows="3" cols=""></textarea>
		<input type="button" id="btnButton" value="button" onclick="fnFunction();" />

	</body>
</html>

 

 

적용화면은 아래와 같습니다.

 

 

추후 Plugin 부분에서 텍스트 박스의 URL 체크 부분은 업데이트 하도록 하겠습니다.

 

그리고 아래 부분은 현재까지의 오류 현황입니다.

  • URL 다음에 작성된 텍스트가 있는 경우 URL 제대로 인식 못함
  • 이미지 교체 불가
  • loading 이미지 불완전
  • 본문의 text를 가져오지 못함..
  • 메타 태그의 description도 못 가져옴
  • https 구분 불가
  • 등 등 등 등….

 

오류 투성이입니다. *_*

 

 

 

PS. 혹시 괜찮은 스크립트 작성 툴 알고 계시면 추천 부탁 드립니다.

 

 

감사합니다.