Question

我试图使用getBoundingClientRect（）将光标的y坐标放在一个可信的div中。代码的IE分支可以工作，但是另一个分支（即用于我当前测试目的的Firefox 3.5）没有。

下面的代码在评论中标有***的有问题的行。在代码中的那一点，selObj和selRange都有一个值（在Firebug中确认），但是我不能在它们中的任何一个上调用getBoundingClientRect（）（例如，给出selObj.getBoundingClientRect不是函数）。我已经读过，Range对象上的Firefox现在支持getBoundingClientRect（），但我无法让它工作。我想我必须在错误类型的对象上调用它...？我该怎么称呼它？

以下代码是完整的测试用例，作为包含相关javascript的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>

Answer 1

我已经读过，Range对象上的Firefox现在支持getBoundingClientRect（）

还没有。这是Firefox 3.7中可以预期的Mozilla 1.9.3功能。

无论如何你都需要回退，因为其他任何浏览器都不支持。

Answer 2

我已经读过，Range对象上的Firefox现在支持getBoundingClientRect（）

The support for that is new in Gecko 1.9.3 alpha，将在3.6.x之后包含在Firefox版本中。 Firefox 3.5不支持它。

Firefox的getBoundingClientRect问题

2 个答案: