현재 위치

홈 ›› Forums ›› 공부 ›› 프로그래밍 QnA

자바스크립트가 IE에서 되는데 FireFox에서 안 되네요.

raymundo의 이미지
글쓴이: raymundo / 작성시간: 일, 2005/02/06 - 12:56오전

사실 자바스크립트에 대해서는 거의 모르고요.. 모 사이트에서 단축키를 사용해서 게시판을 이동하는 것을 보고 제 홈에서 사용하는 위키에 넣어봤습니다. 그런데 IE에서는 잘 되는데 FireFox에서는 안 되네요.

일단, html 의 <HEAD> </HEAD> 사이에 다음의 스크립트가 들어갑니다.

<script>
<!--
var key = new Array();

key['i'] = "wiki.pl?action=index";
key['r'] = "wiki.pl?action=rc";

function GetKeyStroke(KeyStroke) {
	if ( (event.srcElement.tagName != 'INPUT') && (event.srcElement.tagName != 'TEXTAREA') ) {
		isNetscape=(document.layers);
		eventChooser = (isNetscape) ? KeyStorke.which : event.keyCode;
		which = String.fromCharCode(eventChooser).toLowerCase();
		for (var i in key)
			if (which == i) window.location.href = key[i];
	}
}

document.onkeypress = GetKeyStroke;
-->
</script>

이제 브라우징 중에 키보드의 "i"키나 "r"키를 누르면 각각 wiki.pl?action=index 과 wiki.pl?action=rc 로 URL을 이동하는 거죠.

관련 자바스크립트 항목들을 검색해봐도 어디까지가 표준이고 어디가 아닌건지, FireFox에서 같은 효과를 낼 방법이 없는지 잘 모르겠네요. 조언 주시면 감사하겠습니다.

Forums: 
프로그래밍 QnA
rewriter의 이미지

글쓴이: rewriter / 작성시간: 일, 2005/02/06 - 3:47오전 

<!--
var key = new Array();

key['i'] = "wiki.pl?action=index";
key['r'] = "wiki.pl?action=rc";

function GetKeyStroke(KeyStroke) {
    var evt = KeyStroke || window.event;
    var eventChooser = evt.keyCode;

    var target = evt.target || evt.srcElement;

    while(target && target.tagName.toLowerCase() != 'input' &&
        target.tagName.toLowerCase() != 'textarea') {
        target = target.parentElement;
    }

    if (!target) {
        var which = String.fromCharCode(eventChooser).toLowerCase();
        for (var i in key) {
            if (which == i) {
                document.location.href = key[i];
            }
        }
    }
}

document.onkeyup = GetKeyStroke;
-->

이렇게 하시면 될거 같습니다. 표준 여부는 저도 모른답니다. :oops:

raymundo의 이미지

글쓴이: raymundo / 작성시간: 일, 2005/02/06 - 10:17오전

친절한 답변 진심으로 감사드립니다.

결과를 말씀드리면, 반은 성공하고 반은 실패했습니다.

일단 원하는 키를 눌러도 전혀 반응이 없길래 완전 실패라고 생각했는데... 생각해보니 제가 아무리 자바스크립트를 몰라도 현재 있는 코드들만 가지고 간단한 디버깅은 할 수 있겠더군요.

document.location.href = "제홈URL"; return;

위 줄을 GetKeyStroke 함수 곳곳에 삽입해서 어디까지 진행할 수 있나를 봤지요. c에서 printf로 디버깅하듯이.. :D

그랬더니...
첫째, 일단 IE와 FF모두 if (!target) {} 안으로 들어옵니다. 제가 위에 적었던 처음의 코드는 FF는 아예 그곳까지 오지를 못해서 키값 비교를 하지도 못했는데 지금은 가능성이 생긴 것이지요. 이게 절반의 성공이고요.

둘째,
var which = String.fromCharCode(eventChooser).toLowerCase();
를 통과한 직후 which 의 값이, IE에서는 정확히 제가 누른 키 입력으로 나오는데 FF에서는 null인지 특수문자인지 암튼 안 나옵니다. 

if (!target) {
  var which = String.fromCharCode(eventChooser).toLowerCase();
  document.location.href = "http://제홈URL/"+which ; return;

위와 같에 테스트를 하여 브라우저 주소창에 뭐라고 나오는지를 본 것이라... 실제로 null인지 아닌지는 모르겠습니다만 어쨌건 주소창에 아무것도 안 나오네요.

저 디버깅 라인에서 which 대신에 eventChooser 를 넣어봤습니다. 그랬더니 IE에서는 제가 누른 키의 아스키코드값 (A라면 65, a라면 97등)이 제대로 나왔습니다. 하긴 그러니까 그게 fromCharCode에서 스트링이 되고 toLowerCase 를 거쳐 소문자가 되었겠지요. 그런데 FF에서는 저 eventChooser의 값이 0 비스무리하게 나옵니다. 정확히 문자 "0"은 아닌것 같습니다. (문자 "0"이라면 제 홈의 CGI가 처리를 해줬을텐데 아예 아무문자도 없는 것처럼 처리가 되더라고요)

고로 문제의 시발점은 애초의 eventChooser 또는 그 이전의 evt 인 것 같은데 저로서는 더 이상은 모르겠네요. ㅠ,.ㅠ

좋은 하루 되세요!

mmx900의 이미지

글쓴이: mmx900 / 작성시간: 일, 2005/02/06 - 12:26오후

위의 스크립트를 적용시킨 HTML 페이지나 사이트의 주소를 올려 주시지 않겠습니까?
rewriter님의 스크립트가 제 PC에서는 잘 동작 하는 것으로 보아 다른 원인이 있을 수도 있거든요.

Setzer Gabbiani

raymundo의 이미지

글쓴이: raymundo / 작성시간: 일, 2005/02/06 - 12:31오후

http://******** (문제가 해결되어... 삭제했습니다 :-)

입니다. 현재 rewriter 님의 코드를 넣은 상태입니다.

저는 FireFox1.0 으로 테스트했습니다.

좋은 하루 되세요!

mmx900의 이미지

글쓴이: mmx900 / 작성시간: 일, 2005/02/06 - 12:41오후

rewriter wrote:
    var eventChooser = evt.keyCode;

이 부분을

var eventChooser = evt.keyCode || evt.which;

이렇게 고쳐 보세요.

Setzer Gabbiani

raymundo의 이미지

글쓴이: raymundo / 작성시간: 일, 2005/02/06 - 1:22오후

잘 됩니다!!!

rewriter님 mmx900님 정말 감사합니다~ 즐거운 설 보내세요~

좋은 하루 되세요!

익명 사용자의 이미지

글쓴이: 익명 사용자 / 작성시간: 수, 2005/02/09 - 11:08오전

파이어폭스에 웹 디벨로퍼 익스텐션을 사용하면 HTML이나 CSS등의 유효여부를 확인해주는 기능이 있습니다.. 그런것을 활용해보시길..

웹 디벨로퍼 익스텐션에는 저것 외에도 쿠키를 보여주는 기능이나 폼을 POST/GET바꿔주는 기능, 페이지 크기를 측정하는 기능등 웹 개발에 유용한 툴이 많이 들어있습니다..

댓글 달기

텍스트 포맷에 대한 자세한 정보

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.