Firefox에서 getBoundingClientRect 문제

getBoundingClientRect()를 사용하여 contenteditable div 내에서 커서의 y 좌표를 가져 오려고합니다. 코드의 IE 지점은 작동하지만 다른 지점 (즉, 현재 테스트 목적의 Firefox 3.5)은 그렇지 않습니다.Firefox에서 getBoundingClientRect 문제

아래 코드에는 *** 주석이 표시된 문제가있는 줄이 있습니다. 코드의 그 시점에서 selObj와 selRange는 모두 값 (Firebug에서 확인 됨)을 갖지만 둘 중 하나에서 getBoundingClientRect()를 호출 할 수 없습니다 (예 : selObj.getBoundingClientRect는 함수가 아닙니다). 나는 getBoundingClientRect()가 이제 Range 객체의 Firefox에서 지원된다는 것을 읽었지만 작동하도록 할 수는 없다. 나는 틀린 타입의 객체에서 그것을 호출해야한다고 생각한다 ...? 내가 무엇을 부르면 좋을까?

다음 코드는 관련 자바 스크립트가 들어있는 html 파일의 전체 테스트 사례입니다. IE에서 보았을 때 커서의 y 좌표 값을 얻었지만 Firefox에서는 팝업됩니다.

<html> 
<head> 
<title>Test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<style> 
#pageContainer { 
    padding:50px; 
} 
.pageCommon { 

    width: 100px; 
    height: 100px; 
    background-color:#ffffD0; 
    padding: 10px; 
    border: 1px solid black; 
    overflow: auto; 
} 


</style> 
</head> 
<body> 
<div id="pageContainer"> 
    <div id="editor" class="pageCommon" contenteditable onclick="setPageNav();" onkeypress="setPageNav();"> 

    </div> 
    <div>y: <span id="y"></span></div> 

</div> 
<script> 
var y; 

function setPageNav() { 

    page = document.getElementById("editor"); 
    if (window.getSelection) { 
      var selObj = window.getSelection(); 
      var selRange = selObj.getRangeAt(0); 
      // *** Neither of these next two lines work, error is : selObj.getBoundingClientRect is not a function 
      y = selObj.getBoundingClientRect().top; 
      y = selRange.getBoundingClientRect().top; 
    } else if (document.selection) { 
      var range = document.selection.createRange(); 
      y = range.getBoundingClientRect().top; 
    } 
    document.getElementById("y").innerHTML = y; 
} 

</script> 
</body> 
</html>

출처

2010-02-11 Tom

"팝스"? 그게 무슨 뜻인지 설명해 주시겠습니까? 예외가 발생합니까? – Pointy

예, 죄송합니다. 'pops'가 의미하는 바입니다. – Tom

나는 getBoundingClientRect()가 지금 3.6.x. 후 파이어 폭스의 버전에 포함됩니다 Range 개체

The support for that is new in Gecko 1.9.3 alpha, 파이어 폭스에서 지원되는지 읽고 Firefox 3.5에서는 지원하지 않습니다.

출처

2010-02-11 17:07:27 Nickolay

MDC에 따르면, Firefox 3 이상 : https://developer.mozilla.org/En/DOM/Element.getBoundingClientRect 구현에 대한 특별한 참고 사항이 있습니다. FF 3.5에서 –

@TJ Crowder : "it"이 Element.getBoundingClientRect입니다. Gecko 1.9.3의 새로운 기능인 Range.getBoundingClientRect와는 다른 점에 유의하십시오. 이는 I 및 릴리스 노트에서 말한 것입니다. – Nickolay

알겠습니다. 고마워요. –

내가 getBoundingClientRect는()가 아직 Range 개체

에 파이어 폭스에서 지원되는지 읽고 그것을하지 않습니다. 이것은 Firefox 3.7에서 기대할 수있는 Mozilla 1.9.3 기능입니다.

어쨌든 다른 브라우저에서는 지원되지 않으므로 대체 환경이 필요합니다.

출처

2010-02-11 17:07:48 bobince

MDC는 FF 3 이상이라고 주장합니다. https://developer.mozilla.org/En/DOM/Element.getBoundingClientRect FF3.6, Chrome 및 Safari의 기능으로 표시됩니다. 이러한 다양한 구현에 얼마나 적합한 지, 나는 잘 모른다. –

그것은 'Element' 메소드입니다. 새로운 기능은 'Range'에 동일한 기능을 추가하는 것입니다. – bobince

알겠습니다. 고마워요. –

Firefox에서 getBoundingClientRect 문제

답변

관련 문제