尝试获取 iframe 中元素的 .offset().top 值时未定义

Question

我遇到了 Firefox 和 Safari 的问题，当尝试从 iframe 中的元素获取 .offset().top 值时，我在尝试获取该值时返回未定义。这在 Chrome、Edge 和 IE 中似乎可以正常工作，但在 Firefox 或 Safari 中却不行。

这是网址：

https://twlatl.github.io/styleguide/

当您在 Firefox 中单击导航时，您会在控制台中看到错误。

TypeError: this.$iframeContent.find(...).offset(...) is undefined

导致问题的块在这里：

gotoAnchor: function($elem) {
  window.location.hash = '!' + $elem.attr('href').replace('#', '');
  this.top = this.$iframeContent.find('h1' + $elem.attr('href')).offset().top;
  this.$iframeContent.find('html, body').animate({
    scrollTop: this.top
  }, 800);
},

从元素中移除 .offset().top 会移除错误，但也会移除滚动到页面该部分的能力。

我尝试将此变量包装在 .on() 方法中以检查 iframe 是否首先完全加载，但这不起作用。

Answer 1

试试这个（你可以重组以满足你的需要）

var iframe = document.body.querySelector('.hgt-iframe-wrapper > iframe')
var iframeBody = iframe.contentDocument.body
var sectionHeader = iframeBody.querySelector($elem.attr('href'))

if( sectionHeader ){
    sectionHeader.scrollIntoView()
}

注意：这个 ^ 会出错，因为 ID 是 aren't allowed to start with numbers。将部分标题 ID 更改为以字母开头，它将起作用

更新

啊，您的问题是您在加载 iframe 之前正在访问它的内容。如果您有时刷新它会加载得足够快并且您的菜单可以正常工作。您可以在下面的屏幕截图中看到 iframe 加载速度不够快，因此 this.$iframeContent 实际上是空的（没有返回 <div>s）