getBoundingClientRect未返回大小调整信息iOS8

getBoundingClientRect not returning sizing info iOS8

本文关键字：调整 信息 iOS8 返回 getBoundingClientRect      更新时间：2023-09-26

在iOS中的UIWebView中，iframe中有被查询的div。对于每个div，我提取属性以及div的顶部、底部、左侧、右侧、宽度和高度

<div class="x" id="1234" data-type="web"
     data-href="http://x.com/foo?bar=z"></div>

JS:

var divs = iframe['contentDocument'].getElementsByClassName('x');
return [].map.call(divs, function (div) {
    return _.extend(div.getBoundingClientRect(), {
      id: div['id'],
      href: div['dataset']['href'],
      type:  div['dataset']['type']
});

这在iOS 6和iOS 7中运行良好，所有数据都存在，包括getBoundingClientRect中的大小调整数据。在iOS8中，getBoundingClientRect只返回一个空对象，但div的id和数据集字段会返回。有什么想法为什么或如何让它发挥作用吗？

我发现您不能以类似字典的方式访问返回的ClientRect的属性：

document.querySelector("#link").getBoundingClientRect()["left"] // Does not work
document.querySelector("#link").getBoundingClientRect().left    // Does work

或者，作为一个立即执行的功能：

(function() {
  var element = document.querySelector('#link');
  var rect = element.getBoundingClientRect();
  return { left: rect.left, top: rect.top, width: rect.width, height: rect.height }; 
})()

这个实现在iOS 7和iOS 8中都适用。

相关文章：