본문 바로가기

Script/JavaScript

jquery plugin 페이스북 스타일 링크 도우미

 

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

 

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

완벽한 제품도 아니고요…

 

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

 

 


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

(function($) {
	$.fn.GetPageInfo = function(settings) {
		var config = {"widht": "100", "height": "200"};
		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"){
				var data = null;
				$(this).keyup(function(e){
					data = this.value;

					if(data.indexOf("http://") >= 0 && ValidURL(data)){
						if($("div#divLinker").length <= 0){
							$(this).after("<div id='divLinker'><img  id='imgLoading' src='http://jimpunk.net/Loading/wp-content/uploads/loading22.gif' alt='loading' />		<table id='tbContents' border='0' cellspacing='0' cellpadding='0' style='width:100%; display:none;'><tr>				<td width='120px'><img src='' border='0px' alt='' /></td>				<td>					<span class='' id='spanTitle'></span><br />					<span class='' id='spanBody'></span></td>			</tr>		</table></div>");
						}
						else{
							$("div#divLinker").css("display", "");
						}
						var url = null;

						if(data.indexOf("http://") == 0){
							switch(data.substr(data.length)){
								case " ":
									url = data.substr(0);
									break;
								case "\r":
									url = data.substr(0);
									break;
								default:
									url = data;
									break;
							}
						}
						else{
							url = data.substring(data.indexOf("http"), data.length);
						}
						
						if(UrlData != url){
							clearTimeout(Timer);

							UrlData = url;
							Timer = setTimeout(function(){
								fnAjaxCall();
							}, 1000);
						}
					}
				});
			}
		});

		function ValidURL(str) {
			var pattern = /(http|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/
			if(!pattern.test(str)) {
				return false;
			}
			else {
				return true;
			}
		}

		function fnAjaxCall(){
			var loading = $("div#divLinker img#imgLoading");
			var contentArea = $("div#divLinker table");

			loading.css("display", "");
			contentArea.css("display", "none");
			$.ajax({
				url: UrlData
				, async: false
				, contentType: "text/html; charset=UTF-8"
				, context: document.body
				, dataType: "html"
				, success: function(data, textStatus, jqXHR){
					$("div#divLinker img#imgLoading").css("display", "none");
					debugger;
					var linker = $(data);
					contentArea.css("display", "");

					var imgFirst = linker.find("img:first");
					if(imgFirst.width() > imgFirst.height())
						contentArea.find("img").width("100px");
					else
						contentArea.find("img").height("100px");
					
					if(imgFirst.length > 0){
						contentArea.find("img").css("display", "");
						contentArea.find("img").attr("src",imgFirst.attr("src"));
					}
					else
						contentArea.find("img").css("display", "none");

					contentArea.find("span#spanBody").text(data.match("<title>(.*?)</title>")[1]);
					contentArea.find("span#spanBody").text(linker.find("meta[name=description]").attr("content"));
				}
				, error: function(XMLHttpRequest, textStatus, errorThrown){
					$("div#divLinker").css("display", "none");
					alert(errorThrown);
				}
			});
		}

		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() {
				$("#txtData").GetPageInfo();
			});
			
			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. 혹시 괜찮은 스크립트 작성 툴 알고 계시면 추천 부탁 드립니다.

 

 

감사합니다.