跨框架的下拉菜单的跨浏览器，干净的解决方案？

Question

首先让我说我非常喜欢Superfish（＆amp; jQuery）。不幸的是，这显然是？ - 不提供开箱即用的跨框架支持。

情况：外联网网站，由2个框架组成，水平划分。顶部框架（最小的框架）包含一个菜单。当鼠标悬停在此菜单上时，“下拉”内容会显示在底部框架中（当然，在其他元素上）。这是一个例子（实际上，我们今天使用的解决方案）：http://javascript.cooldev.com/scripts/coolmenu/demos/frames/

那么有没有人知道一种方法来构建一个干净的（使用标准的HTML / CSS和尽可能少的JS）解决方案？任何帮助，将不胜感激！ ：）

Answer 1

我猜军队将采取“沟渠你的框架”的事情，所以我不会。我假设你已经告知自己没有框架的替代品，并得出结论你需要框架（无论什么[荒谬的]理由）。

短篇小说是：你不能突破一个框架，就像你不能突破一个窗口一样。所有内容都包含在框架/窗口中 - 没有办法让内容流失。

那就是说，你还有两个选择。

1. 您的父文档恰好是包含两个iframe的常规文档，所有文档都是从同一主机（SOP）提供的。在这种情况下，您的菜单框架可以在父框架中创建实际与iframe本身重叠的元素。因此，您可以将父元素中的元素放置在菜单框的相应元素下方，同时在内容框架上对其进行z索引
2. 您的父框架是框架集文档，因此不会采用框架以外的任何内容。你不幸运。您唯一能做的就是让菜单框执行（1）中描述的相同技巧，但将菜单元素附加到内容框架。

任何一个选项都很糟糕。如果您有选项，请丢弃框架。任何愚蠢的服务器端语言（php，ruby，python，...）都允许您将经常重复使用的组件（如导航）提取到单独的文件中，并将它们链接到您已获得的每个其他文档中。 SSI也可能是一种选择。

Answer 2

如果您使用框架的唯一原因是将菜单保持在窗口顶部，那么您只需在CSS中使用position: fixed即可。

Answer 3

构建一个跨框架的下拉菜单系统就像构建一个普通的下拉菜单系统（鼠标悬停在菜单“head”上，显示菜单“body”;鼠标从头部出来，隐藏身体;等等。），除了：

• 由于元素实际上不能越过框架边界，因此最好的办法是将头部放在一个框架中，将身体放在另一个框架中（如COOLjsMenu）。

• 为了协调这两个部分，您可以（根据具体情况）让一个帧直接操纵另一个帧的元素，或者在帧之间传递消息并让每个帧管理自己的元素。

  < / LI>

因此，额外的复杂性是如何管理两半：

• 如果两个帧都来自same origin，那么来自一个帧的JavaScript可以直接操纵其他帧的元素。 （由于您使用的是COOLjsMenu，我认为您的外联网就属于这种情况。）

• 如果帧来自不同的来源，那么它们无法操纵彼此的元素，尽管您仍然可以在帧之间传递消息：

  • 如果您只需要支持“现代”浏览器（Firefox 3 +，Chrome，Safari 4 +，IE 8 +，Opera 9.5+），那么您可以使用window.postMessage()。

  • 如果您需要支持较旧的浏览器（即IE 6-7），您可以使用easyXDM（如果在用户的浏览器中可用，也会使用window.postMessage()。）

  在这种情况下，您需要在每个帧中使用JavaScript来操纵自己的元素并与其他帧进行通信。

实际上构建一个跨框架下拉菜单系统留给读者练习： - ）

Answer 4

您可以使用纯CSS菜单（例如http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/）。我不确定为什么导航在不同的框架中，但这将为您提供向上或向下移动下拉列表的功能和灵活性（通过调整CSS中的填充/边距/顶部属性）以适应框架的底部。

Answer 5

理想的解决方案是不使用框架。相反，理想情况下，您应该将菜单设置为固定位置。菜单元素的正确CSS将是：

position:fixed

您可能需要进行一些其他调整，例如将菜单的z-index设置为大于文档的其余部分。如果您使用固定定位，您可能可以使用NO javascript。以下是使用固定定位的菜单的几个示例：

1. Collection of 21 fixed position menus - 例如，Face Works menu与您的菜单完全相同而不使用框架。
2. CSS Floating Menu
3. CSS: fixed menus

您应该注意，框架无法访问自身之外的内容。没有CSS / JavaScript可让您的顶部框架获得对底部框架内容的访问权限。允许这种情况发生将是一个安全漏洞。如果你真的需要使用框架，那么坚持使用类似于当前解决方案的东西。

Answer 6

我讨厌扮演魔鬼的拥护者，但是你可以打破框架，因为在我的工作中我们有一个JavaScript菜单可以做到这一点。这是一个非常古老的图书馆，但它确实做到了。你可以非常清楚地看到灰色的边框边框，菜单从顶部框架中突出并出现在其他三个框架上。

Answer 7

在没有太多问题的情况下，我们使用了具有交叉框架支持的下拉菜单。一种方法是使用allwebmenus，一个功能强大的javascript菜单构建器，具有许多非常棒的功能，并且包括开箱即用的交叉框架支持：http://www.likno.com/examples.html?example=crossframe

此页面解释了likno如何做到：http://www.likno.com/drop-down-css-menu/compilepropertiescrossframe.htm。

豪华菜单也做了类似的事情： http://deluxe-menu.com/data-samples/cross-frame-horizontal-1-sample.htm 如果您只想在一个网站上进行此操作会更便宜，但对于多个网站来说更贵。