태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

티스토리(tistory) 글에서 자바스크립트 함수 호출동작

블로그운영/tistory|2014. 4. 3. 08:28

동적으로 내용이 변하는 글 포스팅

CNN student news에 있는 글들에는 모르는 단어를 정리해놓은 부분이 있다. 이렇게 정리된 단어들을 모아서 보여주는 새로운 글. 왠지 javascript를 사용하면 tistory에서 동적으로 글을 만들어 보여줄 수 있을 것같았다. 한번 시도해보자. 이 번글은 그 첫번째 시도로 특정글에서 특정JavaScript함수를 호출하는 것을 해보자.

티스토리 게시글에서 JavaScript 함수 호출

이미 Syntax Highlighter를 적용해 봤기에 tistory에서 JavaScript 함수의 호출이 가능하단 걸 알고 있다. 하지만, body의 onLoad이벤트에 연결을 했기때문 특정 게시글에서만 함수가 호출될 수 있는지는 미지수이다. 단계별로 테스트해봅시다.

게시글의 구조파악

게시플의 구조를 살펴보았다. 일단 게시글은 div태그로 묶여 class가 article로 잡혀 있었다. 함수를 호출하려면 게시글에 특정 id를 삽입하여 함수가 해당 id가 존재하면 동적으로 단어들을 읽어 오도록 하는 구조가 좋아 보였다. 일단 여기까지 테스트를 해보자.

Script file준비

티스토리에 업로드할 js파일을 만들어야 한다. 함수를 body태그에서 onload하도록 연결하여 호출되도록 유도할 것이다. js파일의 내용은 아래와 같다. 함수가 호출된뒤 document내에 EnglishDic이라는 id가 존재하는지 체크하여 존재한다면 alert함수를 호출한다. 단순히 호출되었다는 것을 확인하기 위함이다.

 

이렇게 만든 파일을 티스토리에 업로드하자.


Script file 로딩

이제 티스토리가 위에서 추가한 js파일을 로딩하도록 하자. 아래 내용을 skin.html에 입력하면 된다. 다들 알겠지만, <head>와 </head>사이에서 입력해야 한다.


게시글 작성(Java Script 함수 호출)

실제 티스토리 글에서 함수가 호출되는지 확인을 위해 예제글을 작성하였다. 

티스토리(tistory)에서 자바스크립트 함수 호출 - 예제글

위를 클릭하면 해당글을 확인 할수 있고, JavaScript함수가 호출되는 것도 확인 할 수 있을 것이다. 게시글에는 안보이지만 HTML보기를 하면 아래의 내용이 숨겨져 있습니다. document내에 id가 EnglishDic인놈이 만들어 놓고 script 함수가 이 id의 유무를 기준으로 특정 동작을 하도록 한다.

함수를 이벤트에 연결하기

body의 onload이벤트를 통하여 js파일에 존재하는 함수를 호출하도록 한다. 블로그내의 어떤글을 클릭하여도 이 함수가 호출이 되는 것이다. 이미 onload를 사용하고 있다면 두번째와 같이 함수만 추가 시켜주면 된다. 

위 함수의 호출은 앞에 script 파일 로딩부분과 동일한 곳에서 한다. body태그를 찾아서 입력하면 편하다.

결론

된다. 예제글을 클릭하면 alert함수가 호출되는 것을 확인할 수 있다. 물론 다른 모든 글에서도 해당 함수가 호출되지만, document(글내용중에) id가 EnglishDic인놈이 없기 때문에 함수 중간에 return처리가되어 다른 글에서는 별다는 영향을 미치지 않게 된다. 되긴하지만 좋은 방법인지는 모르겠다. 혹시 더 좋은 아이디어가 있다면 let me know해주세요.

이제 이것을 활용해서 CNN news 글에 있는 단어들을 모아서 보여주는 것을 만들어보자.





댓글()