Javascript 和 CSS 弹出窗口答案

【问题标题】：Javascript and CSS PopupsJavascript 和 CSS 弹出窗口
【发布时间】：2010-03-22 12:21:16
【问题描述】：

我有一个关于基于 CSS 的弹出窗口的问题，例如由 jQuery UI 的对话框系统或 Colorbox 生成的弹出窗口。如果我使用这些（或类似的东西）打开一个 HTML 页面的弹出窗口并且该页面中包含 Javascript，那么弹出窗口中的 Javascript 是在其自己的上下文中运行，还是成为Javascript 在打开它的父窗口中？我要求我可以在两个页面（父页面和弹出页面）上编写 Javascript，这样就不会发生命名空间冲突。

提前致谢！道格

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-dialog

【解决方案1】：

这取决于弹出窗口的类型。（我假设我们在这里讨论的是页内弹出窗口，而不是 window.open() 打开新浏览器窗口的弹出窗口。）

如果它包含一个 IFRAME，您可以在其中加载一个单独的页面，那么该页面将有自己的样式。您必须重新加载所需的任何 CSS 和 JavaScript 文件。

如果它不包含 IFRAME，而只是一个常规 DIV 或其他通过 AJAX 加载内容的元素（或直接在“父”HTML 页面中输出），则弹出窗口将在父级的上下文中运行页。

【讨论】：

你明白我在说什么，这将是页面内弹出窗口，而不是 windows.open() 样式。由于我使用 Colorbox 打开弹出窗口并将 iFrame 设置为 true，因此听起来这会使弹出窗口中的 Javascript 在其自己的上下文中运行。谢谢！
@writes_on 您可以通过右键单击 Firefox 中的弹出内容轻松找到。如果你得到一个菜单项说“这个框架>”，那么你就在一个 IFrame 中。

【解决方案2】：

如果你使用真正的弹出窗口（新窗口），它肯定是在它自己的上下文中。

如果您纯粹在 HTML 中使用模态窗口，则视情况而定。它可以是 iframe（自己的上下文）或注入的元素（父上下文）。

【讨论】：

【解决方案3】：

使用 Colorbox，您可以将 iframe 属性设置为 true，它将在 iframe 中加载内容。这为页面提供了自己的范围。如果您不使用 iframe，则页面将在当前文档的上下文中加载。

$('a.someLink').colorbox({ href:"somePage.html", iframe: true });

【讨论】：

这正是我正在做的，从你所说的来看，这就像拥有一个完全独立的页面（有点像 window.open() 会提供）。这意味着我的弹出式 Javascript 将在其自己的上下文中运行。谢谢！