我在我的一個 JavaScript 函式中使用了 getClientRects() 方法。該功能在 Chrome、Edge 和 Safari 中正常作業，但在 Firefox 中失敗。原因是 getClientRects() 在 Firefox 中的行為不同。
該示例在 CodePen 中可用
var el = document.getElementById('parent');
var range = document.createRange();
range.selectNode(el);
var clientRects = range.getClientRects();
console.log(clientRects);<div class="parent" id='parent'>
<div class="child">Bacon ipsum dolor amet meatball bresaola t-bone tri-tip brisket. Jowl pig picanha cupim landjaeger, frankfurter spare ribs chicken. Porchetta jowl pancetta drumstick shankle cow spare ribs jerky tail kevin biltong capicola brisket venison bresaola. Flank sirloin jowl andouille meatball venison salami ground round rump boudin turkey capicola t-bone. Sirloin filet mignon tenderloin beef, biltong doner bresaola brisket shoulder pork loin shankle turducken shank cow. Bacon ball tip sirloin ham.
</div>
<div id="info">Click somewhere in the paragraph above</div>
</div>在 Chrome 和 Firefox 中運行示例以查看差異。這是 Firefox 中的錯誤嗎？
我試圖參考檔案以獲取任何見解，但無法弄清楚。
uj5u.com熱心網友回復：
這確實是一個互操作問題，我在規范上打開了一個問題以澄清這一點。
規范要求在Range#getClientRects()呼叫該方法時，
對于范圍選擇的每個元素，其父元素未被范圍選擇，包括通過呼叫
getClientRects()該元素回傳的邊界區域。
在您的 Range 中，只有一個元素的父元素未被范圍選擇：#parent.
所以我們應該得到一個由 的 DOMRect 組成#parent的 DOMRectList。對于這一點，所有瀏覽器都同意，這個元素只有一個這樣的 DOMRect：
var el = document.getElementById("parent");
// Element#getClientRects();
var clientRects = el.getClientRects();
console.log(clientRects.length); // 1 everywhere<div class="parent" id='parent'>
<div class="child">Bacon ipsum dolor amet meatball bresaola t-bone tri-tip brisket. Jowl pig picanha cupim landjaeger, frankfurter spare ribs chicken. Porchetta jowl pancetta drumstick shankle cow spare ribs jerky tail kevin biltong capicola brisket venison bresaola. Flank sirloin jowl andouille meatball venison salami ground round rump boudin turkey capicola t-bone. Sirloin filet mignon tenderloin beef, biltong doner bresaola brisket shoulder pork loin shankle turducken shank cow. Bacon ball tip sirloin ham.
</div>
<div id="info">Click somewhere in the paragraph above</div>
</div>但是瀏覽器不同意的地方是第二步。
對于由范圍選擇或部分選擇的每個文本節點 [...]
Firefox 顯然只考慮在 Range 的第一個內容中可訪問的 Text 節點，而 Chrome 和 Safari 將遍歷每個元素以查找這些 Text 節點。
如果您確實選擇了這個元素的內容，那么 Firefox 將回傳兩個 DOMRect，一個是 of.child和一個#info：
var el = document.getElementById('parent');
var range = document.createRange();
// select the content, not the node itself
range.selectNodeContents(el);
var clientRects = range.getClientRects();
console.log(clientRects.length); // 2 in Firefox<div class="parent" id='parent'>
<div class="child">Bacon ipsum dolor amet meatball bresaola t-bone tri-tip brisket. Jowl pig picanha cupim landjaeger, frankfurter spare ribs chicken. Porchetta jowl pancetta drumstick shankle cow spare ribs jerky tail kevin biltong capicola brisket venison bresaola. Flank sirloin jowl andouille meatball venison salami ground round rump boudin turkey capicola t-bone. Sirloin filet mignon tenderloin beef, biltong doner bresaola brisket shoulder pork loin shankle turducken shank cow. Bacon ball tip sirloin ham.
</div>
<div id="info">Click somewhere in the paragraph above</div>
</div>如果你走得更遠，選擇 的內容.child，你最終會在每個瀏覽器中每行得到一個框：
var el = document.querySelector('.child');
var range = document.createRange();
// select the content, not the node itself
range.selectNodeContents(el);
var clientRects = range.getClientRects();
console.log(clientRects.length); // all browsers agree, 1 box per line<div class="parent" id='parent'>
<div class="child">Bacon ipsum dolor amet meatball bresaola t-bone tri-tip brisket. Jowl pig picanha cupim landjaeger, frankfurter spare ribs chicken. Porchetta jowl pancetta drumstick shankle cow spare ribs jerky tail kevin biltong capicola brisket venison bresaola. Flank sirloin jowl andouille meatball venison salami ground round rump boudin turkey capicola t-bone. Sirloin filet mignon tenderloin beef, biltong doner bresaola brisket shoulder pork loin shankle turducken shank cow. Bacon ball tip sirloin ham.
</div>
<div id="info">Click somewhere in the paragraph above</div>
</div>因此，如果您希望 Chrome 在所有瀏覽器中的行為，您必須手動遍歷每個 Text 節點并一一檢索它們的 DOMRect。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/452217.html
標籤：javascript dom 火狐 Mozilla 网页API