在尝试获取.offset（）时，获取未定义。在iframe中元素的最高值

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>）