페이스 북처럼 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.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/
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. 혹시 괜찮은 스크립트 작성 툴 알고 계시면 추천 부탁 드립니다.
감사합니다.
'Script > JavaScript' 카테고리의 다른 글
| 자바스크립트 텍스트 박스 마지막 글자에 커서 위치하는 코드 (0) | 2013.01.25 |
|---|---|
| jquery plugin 페이스북 스타일 링크 도우미 (0) | 2012.10.23 |
| 순수 javascript cross-browser ajax 구현 (Xmlhttprequest) (0) | 2012.07.26 |
| Javascript, JQuery Xml Parsing (File, String) [Convert string to xml] (0) | 2011.02.28 |
| Javascript, JQuery preventDefault의 이해 (0) | 2011.02.23 |
