javascript - iframe DOM 覆盖

Question

我正在切换一些导航动画以显示和隐藏特定的 li 元素。我希望每次用户在主屏幕上时都显示我的元素。我已成功维护了初始加载时显示的 nav 项目。

这是一个演示:

https://jsfiddle.net/lorenabrito/p9jm59db/22/

如果内容没有与之交互，它将通过 .replace() 重定向到主页

但是，如果 nav 被隐藏并且触发了不活动条件，则导航在重定向时保持关闭状态，从而导致 nav 重复。我知道 nav 重复，因为主屏幕页面正在主屏幕的 iframe 内加载。

理想情况下，当触发页面不活动重定向时，我想用主屏幕内容覆盖 DOM。我暂时想到也许我可以设置一个条件，以便在 iframe 中加载任何新内容时返回，但通过替换，我使用的 src 值不会改变。我不知道是我看这个问题太久还是根本不可能。

所有三个页面都使用相同的域。

我目前每次 iframe 加载时都会进行控制台日志记录。

我找到了Access child iFrame DOM from parent page最有帮助的。

任何意见都将不胜感激。

//main page with navigation 
<iframe id="main" src="http://main-screen.html"></iframe>

//second page 
//http://second-screen.html
if (inactivity > 3) // waits 3 mins. 
  window.location.href = 'http://main-screen.html'; 
}

//third page 
//http://third-screen.html
if (inactivity > 3) // waits 3 mins. 
  window.location.href = 'http://main-screen.html'; 
}

很抱歉没有立即发布演示。谢谢!

Answer 1

我已经成功地使用嵌套的 iframe 编写了窗口的 DOM 结构。最终，我在项目开发过程中得出的结论是，我最初的方法很困惑。我正在寻求用最近加载的 iframe 替换该 windows DOM。

最后我学到了很多关于 iframe 的知识!

• get parent.location.url - iframe - from child to parent
• Access child iFrame DOM from parent page
• Is there a way to uniquely identify an iframe that the content script runs in for my Chrome extension?