getBoundingClientRect与Firefox的问题 [英] getBoundingClientRect problem with Firefox
问题描述
下面的代码有问题的行标有* **在评论中。在代码中的这一点，selObj和selRange都有一个值（在Firebug中确认），但我无法调用getBoundingClientRect（）（例如，selObj.getBoundingClientRect不是函数）。我已经读过，Range对象上的Firefox现在支持getBoundingClientRect（），但是我无法使它工作。我想我必须把它称为错误的对象类型...？我应该怎样调用它？
以下代码是完整的测试用例，它是一个包含相关javascript的html文件。在IE浏览器中，我得到了一个游标的y坐标值，但是在Firefox中，它会弹出。
< html>
< head>
< title>测试< /标题>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8>
< style>
#pageContainer {
padding：50px;
}
.pageCommon {
width：100px;
height：100px;
background-color：＃ffffD0;
padding：10px;
border：1px纯黑色;
溢出：auto;
}
< / style>
< / head>
< body>
< div id =pageContainer>
< div id =editorclass =pageCommoncontenteditable onclick =setPageNav（）; onkeypress事件= setPageNav（）; >
< / div>
< div> y：< span id =y>< / span>< / div>
< / div>
< script>
var y;
函数setPageNav（）{
page = document.getElementById（editor）;
if（window.getSelection）{
var selObj = window.getSelection（）;
var selRange = selObj.getRangeAt（0）;
// ***接下来的两行都不起作用，错误是：selObj.getBoundingClientRect不是函数
y = selObj.getBoundingClientRect（）。
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>
getBoundingClientRect（）现在支持Firefox上的Range对象。
现在还不是。这是Firefox 3.7中的一个Mozilla 1.9.3特性。
无论如何，您将需要回退，因为它不受任何其他浏览器的支持。 b $ b
I am trying to get the y coordinate of the cursor within a contenteditable div using getBoundingClientRect(). The IE branch of the code works, but the other branch (i.e. Firefox 3.5 for my current testing purposes) does not.
The code below has the problematic lines marked with *** in the comment. At that point in the code, both selObj and selRange have a value (confirmed in Firebug), but I cannot call getBoundingClientRect() on either of them (gives e.g. selObj.getBoundingClientRect is not a function). I have read that getBoundingClientRect() is now supported on Firefox on the Range object, but I can't get it to work. I guess I must be calling it on the wrong type of object...? What should I be calling it on ?
The following code is the full test case as an html file containing the relevant javascript. Viewed in IE, I get a value for the y coordinate of the cursor, but in Firefox it pops.
<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>
I have read that getBoundingClientRect() is now supported on Firefox on the Range object
Not yet it isn't. That's a Mozilla 1.9.3 feature you can expect in Firefox 3.7.
You'll need fallback anyway, since it's not supported by any other browsers.
这篇关于getBoundingClientRect与Firefox的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
