반응형
사용자가 <a href="">링크</a> 로 된 링크를 클릭시 이동하고자 하는 URL을 알아내거나 클릭한 페이지로 이동하기전 자신이 원하는 행동을 하고자 할때 다음과 같이 사용자 이벤트 메시지를 잡아 낼 수 있다.
다음 소스는 사용자가 링크를 클릭시 자신이 원하는 곳으로 새창을 띄운뒤 다시 부모창으로 포커스를 이동한다음 원래 클릭해서 이동하고자 한 곳을 보여주는 내용 입니다.
목적은 홈페이지 모든 소스에 클릭시 원하는 곳으로 띄운뒤 새로운 창을 띄워야 하는 기능을 추가할려고 하다 보니 아래와 같이 구현하게 되었음.
이렇게 해서 굳이 사이트 코딩을 일일이 변경 해주지 않아도 원하는 영역에 이벤트 기능을 넣을수 있음.
<html>
<script language="JavaScript">
function linkclick() {
var e = arguments[0] || event;
var target = e.target || e.srcElement;
if(target.tagName.toLowerCase() == "a") { //클릭한 곳이 <a 태그인지 확인
window.open("새창 URL","_blank"); //팝업을 새창으로 띄우기 이외에도 원하는 이벤트처리
window.focus(); //새창이 뜬뒤 포커스를 다시 본창으로 오도록 처리
}
}
</script>
<body onClick="linkclick()">
<a href="a.html">a</a>
<a href="b.html">b</a>
<a href="c.html">c</a>
</body>
</html>
참고: 간혹 포커스가 다시 부모창으로 안돌아올 경우 새창 페이지에도 다음과 같이 추가해주면 확실하게 포커스가 돌아온다.
<html>
<body onLoad="opener.focus()">
</body>
</html>
위 기능을 응용하면 마우스를 스크롤 움직인다던지 특정 <input 박스를 클릭한다던지 어떠한 사용자 액션이라도 감지 하여 원하는 이벤트를 실행할 수 있습니다.
위 와 같은 기능으로 로그를 잡고자 할때에도 유용하게 쓰이겠죠.
페이지중에서 사용자가 어디를 클릭하는지 감지 하고자 할때
if(target.tagName.toLowerCase() == "a") { //클릭한 곳이 <a 태그인지 확인
alert(target);
}
위 소스의 target은 사용자가 클릭한 URL을 담고 있으므로 target정보를 저장할 수 있으니 접속자 패턴을 분석하는데 용이할듯.
아마도 통계 분석해주는 사이트에서 보통 스크립트 한줄 삽입하는데 이와 같은 원리로 로그를 잡는것 같다. ^^
위 글은 세이박스에서 직접 작성한 것으로 퍼가실 경우 반드시 출처와 함께 남기시길 바랍니다.
출처 : 세이박스 http://saybox.tistory.com/468
다음 소스는 사용자가 링크를 클릭시 자신이 원하는 곳으로 새창을 띄운뒤 다시 부모창으로 포커스를 이동한다음 원래 클릭해서 이동하고자 한 곳을 보여주는 내용 입니다.
목적은 홈페이지 모든 소스에 클릭시 원하는 곳으로 띄운뒤 새로운 창을 띄워야 하는 기능을 추가할려고 하다 보니 아래와 같이 구현하게 되었음.
이렇게 해서 굳이 사이트 코딩을 일일이 변경 해주지 않아도 원하는 영역에 이벤트 기능을 넣을수 있음.
<html>
<script language="JavaScript">
function linkclick() {
var e = arguments[0] || event;
var target = e.target || e.srcElement;
if(target.tagName.toLowerCase() == "a") { //클릭한 곳이 <a 태그인지 확인
window.open("새창 URL","_blank"); //팝업을 새창으로 띄우기 이외에도 원하는 이벤트처리
window.focus(); //새창이 뜬뒤 포커스를 다시 본창으로 오도록 처리
}
}
</script>
<body onClick="linkclick()">
<a href="a.html">a</a>
<a href="b.html">b</a>
<a href="c.html">c</a>
</body>
</html>
참고: 간혹 포커스가 다시 부모창으로 안돌아올 경우 새창 페이지에도 다음과 같이 추가해주면 확실하게 포커스가 돌아온다.
<html>
<body onLoad="opener.focus()">
</body>
</html>
위 기능을 응용하면 마우스를 스크롤 움직인다던지 특정 <input 박스를 클릭한다던지 어떠한 사용자 액션이라도 감지 하여 원하는 이벤트를 실행할 수 있습니다.
위 와 같은 기능으로 로그를 잡고자 할때에도 유용하게 쓰이겠죠.
페이지중에서 사용자가 어디를 클릭하는지 감지 하고자 할때
if(target.tagName.toLowerCase() == "a") { //클릭한 곳이 <a 태그인지 확인
alert(target);
}
위 소스의 target은 사용자가 클릭한 URL을 담고 있으므로 target정보를 저장할 수 있으니 접속자 패턴을 분석하는데 용이할듯.
아마도 통계 분석해주는 사이트에서 보통 스크립트 한줄 삽입하는데 이와 같은 원리로 로그를 잡는것 같다. ^^
위 글은 세이박스에서 직접 작성한 것으로 퍼가실 경우 반드시 출처와 함께 남기시길 바랍니다.
출처 : 세이박스 http://saybox.tistory.com/468
반응형
'웹프로그램' 카테고리의 다른 글
| 자바스크립트 팝업 또는 iframe에서 부모창 페이지 새로고침 (0) | 2008.11.07 |
|---|---|
| 자바스크립트 상태바에 링크 주소 숨기기 (0) | 2008.11.07 |
| 자바스크립트 게시판 리스트에서 본문글 미리 보여주기 (0) | 2008.11.07 |
| 자바스크립트 email 정규표현식 (0) | 2008.11.07 |
| PHP 로그인후 현재 페이지로 돌아오기 처리 (0) | 2008.10.30 |
| PHP 웹에서 서버 동시 접속자 수 확인 하기 (0) | 2008.10.28 |
| PHP 처리후 페이지 이동 하는 방법들 (0) | 2008.10.20 |
| PHP 날짜함수 요일 한글로 표시하기 (0) | 2008.10.19 |