проблема getBoundingClientRect с Firefox - PullRequest
Новая
       17

проблема getBoundingClientRect с Firefox

4 голосов
/ 11 февраля 2010

Я пытаюсь получить координату y курсора в contenteditable div, используя getBoundingClientRect (). Ветвь IE кода работает, но другая ветвь (т.е. Firefox 3.5 для моих текущих целей тестирования) - нет.

В приведенном ниже коде есть проблемные строки, отмеченные *** в комментарии. В этот момент в коде selObj и selRange имеют значение (подтверждено в Firebug), но я не могу вызвать getBoundingClientRect () ни для одного из них (например, selObj.getBoundingClientRect не является функцией). Я прочитал, что getBoundingClientRect () теперь поддерживается в Firefox для объекта Range, но я не могу заставить его работать. Я думаю, что я должен вызывать это на неправильном типе объекта ...? На что мне звонить?

Следующий код представляет собой полный тестовый пример в виде html-файла, содержащего соответствующий javascript. При просмотре в 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>

Ответы [ 2 ]

4 голосов
/ 11 февраля 2010

Я прочитал, что getBoundingClientRect () теперь поддерживается в Firefox для объекта Range

Пока нет. Это особенность Mozilla 1.9.3, которую вы можете ожидать в Firefox 3.7.

В любом случае вам понадобится запасной вариант, поскольку он не поддерживается другими браузерами.

2 голосов
/ 11 февраля 2010

Я прочитал, что getBoundingClientRect () теперь поддерживается в Firefox для объекта Range

Новая поддержка в Gecko 1.9.3 alpha , которая будет включена в версию Firefox после 3.6.x. Firefox 3.5 не поддерживает его.

...