니들웍스 주제: 티스토리용 XML 이용한 플러그인(?)
국기 보여주는 플러그인을 티스토리에 적용할 수 있는 방법은 없을까 궁리해 보다가 IP주소에 따른 국가데이터를 XML로 생성시켜 놓고, 그걸 자바스크립트로 불러들이면 가능하겠지 싶어서 뚝딱뚝딱 해봤습니다.
결론부터 말씀드리자면, "됩니다". 그렇지만, IP주소가 들어있는 XML 파일의 용량이 워낙에 크다보니 (26000개 이상) IP주소를 비교하는 과정에서 시간이 너무 오래 걸리네요. 사실, 브라우저가 죽어서 확인하지 못했습니다만, XML 파일의 데이타를 1000개 미만으로 샘플링해서 테스트를 해보면 아무런 문제가 없습니다. 아무래도, 이건 최적화 문제 같은데요... 한번 봐주실랍니까? ^^;
이 미션은 "티스토리에 국기 아이콘 붙이기" 입니다. ^^
<ul>
<li>XML 파일 다운로드 및 저장. 저장위치는 /skin/images/ip2nation.xml</li>
<li>플러그인 파일 생성 및 활성화</li>
index.xml
<binding>
<listener event="ViewCommenter">setIpAddrDisplay</listener>
<listener event="ViewGuestCommenter">setIpAddrDisplay</listener>
</binding>index.php
function setIpAddrDisplay($target, $mother)
{
$strIpAddr = $mother['ip'];
$strSpanStyle= 'margin: 0px; margin-right: 10px; padding: 0px;';
$strScript = '<span id="comments" style="'.$strSpanStyle.'">';
$strScript .= $strIpAddr;
$strScript .= '</span>';
$target = $strScript.$target;
return $target;
}<li>자바스크립트 생성 및 저장. 저장위치는 /skin/images/FlagIcon.js</li>
FlagIcon.js
var objXmlDoc = null;
function setXMLFlagIcon(url)
{
// for IE
if (window.ActiveXObject)
{
objXmlDoc = new ActiveXObject("Microsoft.XMLDOM");
objXmlDoc.async = false;
objXmlDoc.load(url);
setFlagIconTag();
}
// for Non-IE
else if (document.implementation && document.implementation.createDocument)
{
objXmlDoc = document.implementation.createDocument("", "", null);
objXmlDoc.load(url);
objXmlDoc.onload = setFlagIconTag;
}
else
{
alert("XML Document cannot be handled with your browser");
}
}
function setFlagIconTag()
{
var blTagIp = true;
var strIp = "";
var objDocTagName = null;
var i = 0;
while (blTagIp)
{
objDocTagName = document.getElementById("comments");
if (objDocTagName.tagName.toLowerCase() == "span")
{
strIp = objDocTagName.innerHTML;
objDocTagName.innerHTML = convertIp(strIp);
}
else
{
blTagIp = false;
}
i++;
}
}
function convertIp(strIp)
{
var arrIp = strIp.split(".");
var intIp = arrIp[0]*256*256*256 + arrIp[1]*256*256 + arrIp[2]*256 + arrIp[3]*1;
var strIpCode = "";
var strIpCountry = "";
var objXmlIpHexxed = objXmlDoc.getElementsByTagName("ip_hexxed");
var objXmlIpCode = objXmlDoc.getElementsByTagName("code");
var objXmlIpCountry = objXmlDoc.getElementsByTagName("country");
for (var i = 0; i < objXmlIpHexxed.length; i++)
{
if (objXmlIpHexxed[i].childNodes[0].data < intIp)
{
strIpCode = objXmlIpCode[i].childNodes[0].data;
strIpCountry = objXmlIpCountry[i].childNodes[0].data;
}
else
{
break;
}
}
var arrImgPath = location.pathname.split("/");
var strImgSrc = "";
for (i = 0; i < arrImgPath.length - 1; i++)
{
strImgSrc = strImgSrc + "/" + arrImgPath[i];
}
strImgSrc = strImgSrc + "/images/" + strIpCode + ".gif";
var strImgAlt = strIpCountry;
var strImgTag = strImgSrc+":::"+strImgAlt;
// var strImgTag = "<img src=\""+strImgSrc+"\" width=\"16\" height=\"11\" alt=\""+strImgAlt+"\" />";
return strImgTag;
}<li>스킨파일 수정</li>
skin.html
<script type="text/javascript" language="javascript" src="./images/FlagIcon.js"></script>
<title>[##_title_##] :: [##_page_title_##]</title>
</head>
<body onload="setXMLFlagIcon('./images/ip2nation.xml')"></ul>
Nothing is Impossible
http://www.justinchronicles.net
http://www.justinchronicles.net
