2

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

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

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

它在 div 中是可行的，我只是不确定在不同的窗口中是否也是如此。我什至找不到可以尝试的东西。

我不是 jQuery 或网页设计方面的专家，所以请给我足够详细的建议，让我开始。非常感谢。

关于答案...

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

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

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

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

4

4 回答 4

2

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

您需要将子窗口分配给 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 只是让一些选择器和页面操作更容易一些。

于 2012-08-18T01:07:31.710 回答
1

是的，有可能。您可以使用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);
});
于 2012-08-18T01:18:41.843 回答
0

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();
于 2012-08-18T01:01:16.480 回答
0

可能性还包括使用“localStorage”。只要“来源”相同，并且浏览器来自同一供应商，它就可以工作。

在一个窗口中，创建一个事件监听器：

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找到了说明

于 2016-06-29T21:08:28.393 回答