JavaScript 中的帧位置答案

【问题标题】：Frame position in JavaScriptJavaScript 中的帧位置
【发布时间】：2008-12-29 08:12:59
【问题描述】：

我有一个包含 3 个框架的基于框架的网页。顶线、左侧导航和右下角内容框架。

现在，我想在用户右键单击内容框架时显示一个弹出菜单。因为 div-container 不能跳出框架，所以我的想法是，将整个框架页面放入一个新的 iframe 中。在那个页面中，我可以有第二个 iframe，这是我的弹出菜单。

所以现在，我有这个布局：

<html> (start-page)
  <iframe  (real content)
    <frameset 
      top-frame
      navigation-frame
      content-frame
    >
  >
  <iframe> (my popup-menu, positioned absolutelly and hidden by default)
</html>

在我的内容框架中，我将“onmouseover”事件分配给正文标签。此事件应在当前鼠标位置打开弹出 iframe。这正是我的问题：如何让鼠标坐标相对于顶级网站（我草稿中的起始页）？

目前我有这个 mouseDown 功能（现在只在 IE 中工作 - 但让它在 FF & Co 中工作不应该是问题......）

function mouseDown(e)
{
  if (window.event.button === 2 || window.event.which === 3) 
  {
    top.popupFrame.style.left = event.screenX + "px";
    top.popupFrame.style.top = event.screenY + "px";
    top.popupFrame.style.display = "";
    return false;
  }    
}

如您所见，“event.screenX”和“screenY” - 变量不是我可以使用的变量，因为它们与主页无关。

有什么想法吗？

【问题讨论】：

帧中帧不是最佳解决方案。我建议您删除带有框架集定义的页面并将其替换为带有 iframe 的页面。这样一来，您只能获得一级深度的帧。
另外，由于您只在 mouseDown 中使用 window.event，它只能在 IE 和 Opera 中使用。
正如我在问题中所写，我已经知道“window.even” - 问题 - 所以这只是一个测试代码，最终什么都没有......

标签： javascript popup frame mouse-position

【解决方案1】：

如果您只打算支持 IE - 您可以通过调用 window.showModalDialog 尝试使用新的模式窗口。您可以将新窗口放置在屏幕上的任何位置。

一般来说使用新窗口和模态窗口有很多缺点...

顺便说一句 - FF 3 及以上还有 supports window.showModalDialog

【讨论】：

【解决方案2】：

你说它是一个企业应用——你必须支持所有主流浏览器，还是 IE 就足够了？

我问这个是因为 IE 有一个功能完全符合你的需要：

window.createPopup(...)

http://msdn.microsoft.com/en-us/library/ms536392(VS.85).aspx

即使在浏览器窗口之外也可以看到弹出窗口！ :-)

要显示它，请使用接受位置和大小参数的 .show(...) 方法（有关详细信息，请参阅 MSDN）。好消息是，您还可以传递对相对于该位置的页面元素的引用，因此您可以轻松地相对于某个页面元素、某个框架、某个浏览器窗口甚至相对于桌面定位弹出窗口.

【讨论】：

好东西 - 但这并不能解决问题：我应该在哪个位置弹出窗口？
我添加了有关显示方法和相对定位的信息。这有帮助吗？

【解决方案3】：

我强烈建议您使用 css 将您的框架集切换为标准 DIV 布局。这是设置lots of different css layouts 的良好起点。

我知道这可能不是您想听到的，但是除了您当前面临的弹出菜单问题之外，框架还有很多缺点。例如：

框架很难或不可能正确添加书签，因为框架集通常是地址中唯一可见的页面。
通过在新的浏览器窗口中加载链接很容易打破框架集。这意味着用户可能会丢失导航或迷路。
它们不会在移动设备和纯文本浏览器上正常降级。 css 布局的一大优点是即使没有打开任何样式，它们仍然可以使用。

【讨论】：