Question

我想实现以下UI效果，非常感谢您的帮助或提示。

1）单击链接时，会弹出一个窗口（最好是相对于链接的位置而不是固定的）。该链接指向基于php的URL。

2）弹出窗口应该与原始窗口有一些“关系”或相同的“名称空间”，例如，传递鼠标事件，跨窗口“滚动到”等等。

它可以跨越div，我只是不确定它是否也适用于不同的窗口。我甚至找不到可以尝试的东西。

我不是jQuery或Web设计的专家，所以请为我提供足够的详细信息。非常感谢。

关于答案......

首先，谢谢！我目前正在测试“揭幕战”...... 当我这样做时，我想知道是否可以引用来自不同窗口的对象。例如，以下代码，

function mse_over()
{
  $('#'+object).css('border', '2px ridge brown');
}

只是改变了对象的边框颜色。

我的问题是在子窗口中，如果对象在父窗口中，可以这样做（反之亦然）。一种可行的方法是从孩子那里调用“mse_over”。但是可以直接访问跨窗口的对象吗？谢谢。

Answer 1

如果通过链接打开一个窗口，那么管理从子级到父级的内容以及相反的内容当然是可行的。

您需要将子窗口分配给javascript对象。此示例打开一个新窗口，然后更改窗口的标题：

child_window = window.open('test.php');

$(child_window.document).ready(function () {
  $(child_window.document).contents().find('#title').html('New title');
});

同样，您可以通过将window.opener分配给对象来管理父级：

parent_window = window.opener

这是核心javascript，jQuery只是让一些选择器和页面操作更容易。

Answer 2

是的，有可能。你可以使用window.opener window.opener是一个变量，它保存打开当前窗口的窗口的窗口对象。

在我的示例中，我假设您正在使用jQuery。使用jQuery并不是必需的，但是我用它来抽象出浏览器差异。

您可以在主窗口中执行此操作：

window.onChildWindowClick = function(e){
    //do stuff with click event
}

现在在弹出窗口中

$("#element-in-popup").click(function(e){
    window.opener.onChildWindowClick(e);
});

Answer 3

http://www.w3.org/TR/webmessaging/#web-messaging ＆安培; http://www.w3schools.com/jsref/prop_win_opener.asp 可以帮到你。

跨文档消息传递允许您在窗口之间传递事件。但是，不允许跨站点脚本编写。

对于父窗口：

var event = function() {...};
childw = window.open(...);

对于子窗口：

window.opener.func();

Answer 4

可能性还包括使用＆＃34; localStorage。＆＃34;只要＆＃34;起源＆＃34;它就会起作用。是相同的，浏览器来自同一供应商。

在一个窗口中，使用以下命令创建一个事件监听器：

window.addEventListener('storage', function(e) {...

在另一个窗口中，通过localStorage添加或更改内容：

localStorage.setItem("key", "value");

您会发现，如果您尝试将现有项目设置为与之前相同的值，则不会触发事件（来自我所见）。

我在https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

找到了路线

如何跨窗口传递事件，可能吗？

4 个答案: