来自 iframe 本身的 iframe 上的 Div答案

【问题标题】：Div over iframe that is from iframe itself来自 iframe 本身的 iframe 上的 Div
【发布时间】：2009-12-25 01:46:26
【问题描述】：

我有一个 div，它包含在来自外部 html 的 iframe 中

<iframe src="test.html">

基于 html 的“上下文菜单”需要位于 iframe 之上，但上下文菜单的 html 代码位于 iframe 本身中。首选纯 CSS 解决方案。

【问题讨论】：

标签： html css iframe

【解决方案1】：

iframe 的内容不能显示在 iframe 之外。在 iframe 中，您可以使用“位置：绝对”和“z-index：1000”（或另一个适当的大数字）让 div 出现在其他元素上。请注意，绝对定位的元素将从文档流中删除。可以使用“top”、“left”、“right”和“bottom” CSS 属性设置位置。

【讨论】：

【解决方案2】：

只要两个框架在同一个域中，您就可以使用 Javascript 将 DOM 元素移动到父框架 (window.parent.document.appendChild(...))。我已经做到了，并且有效。这只是很麻烦，您必须自己决定是否值得。

请务必查看 bobince 对以下问题的评论，了解如何操作。

不要忘记，一旦将子框架的样式表移到父框架，它就不会应用于菜单。

【讨论】：

我们在两个不同的域上成功地执行了类似的操作，但它有点复杂。
我想过建议这个，但我个人觉得这是一个 hack。如果内容显示在 iframe 范围之外很重要，那么它首先不应该在 iframe 中。如果它是唯一的解决方案，那将是一个聪明的解决方案。-
我确实认为这是唯一的解决方案，而且这个问题对我来说就像一个边界案例（如下拉菜单或上下文菜单）。如果你通过 DOM 来回移动，如果用户界面完全需要它，它是半干净和合法的解决方案。
您不应该能够将节点从一个文档移动到另一个文档，这在 DOM Level 1 Core 中确实是一个错误，尽管它在某些浏览器中确实有效（有点......我怀疑它可能会导致一些恶化的极端情况和内存泄漏）。你应该做的是调用document.importNode 从 iframe 的文档中获取节点。不幸的是，这种方法在 IE 中不受支持……虽然写一个回退函数到 createElement、createTextNode 等来复制另一个文档的节点并不是太棘手。
@bobince，很棒的信息。谢谢。我在我的答案中添加了一个注释。

【解决方案3】：

您确实复制了典型的“Ajax”功能，因为它已经被许多框架（如 jQuery）抽象出来，而且您不太可能做得更好，我会试一试。不要重新发明轮子。

您可以找到great example here。

$("#links").load("/Main_Page #jq-p-Getting-Started li");

【讨论】：