getBoundingClientRect與Firefox的問題

我想使用getBoundingClientRect（）獲取在contenteditable div內的遊標的y座標。代碼的IE分支有效，但其他分支（即我當前測試目的的Firefox 3.5）則不支持。getBoundingClientRect與Firefox的問題

下面的代碼在註釋中有***標記的問題行。在代碼中的這一點，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>

來源

2010-02-11 Tom

「流行音樂」？你能解釋一下這是什麼意思嗎？它是否會拋出異常？ – Pointy 2010-02-11 14:36:38

是的，對不起，這就是'pops'的意思 – Tom 2010-02-26 16:33:55

我已閱讀，getBoundingClientRect（）現在支持在Firefox Range對象

The support for that is new in Gecko 1.9.3 alpha，這將被包含在3.6.x.以後版本的Firefox上Firefox 3.5不支持它。

來源

2010-02-11 17:07:27 Nickolay

根據MDC的說法，它在Firefox 3及更高版本中：https：//developer.mozilla.org/En/DOM/Element.getBoundingClientRect甚至還有關於實現的特別注意事項在FF 3.5 – 2010-02-11 18:07:13

@TJ Crowder：「它」是Element.getBoundingClientRect。請注意，它與Range.getBoundingClientRect不同，它是Gecko 1.9.3中的新增功能，正如我和發行說明所述。 – Nickolay 2010-02-11 18:57:47

明白了，謝謝。 – 2010-02-12 12:31:41

我已閱讀，getBoundingClientRect（）現在支持在Firefox 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剛剛檢查過，並且它在FF 3.6，Chrome和Safari中顯示爲一個函數。我不知道它在這些不同的實現中有多合規。 – 2010-02-11 18:08:04

這就是'Element'方法。新功能爲'Range'增加了相同的功能。 – bobince 2010-02-11 18:35:18

明白了，謝謝。 – 2010-02-12 12:31:59

getBoundingClientRect與Firefox的問題

回答

相關問題