iframe DOM overwrite

Question

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

下面是一个示例:

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

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

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

理想情况下，当触发页面不活动重定向时，我希望用主屏幕内容覆盖DOM。我暂时认为也许我可以设置一个条件返回时，任何新的内容已经加载在iframe，但与替换我使用的src值不改变。我不知道是我关注这个太久了还是根本不可能。

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

我目前控制台记录每次iframe加载。

我发现从父页面访问子iFrame DOM最有帮助。

如有任何意见，不胜感激。

//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
• 从父页面访问子iFrame DOM
• 是否有一种方法可以唯一地识别内容脚本在我的Chrome扩展中运行的iframe ?