Question

我的主页上有多次重复的代码（它是动态生成的）。

<input type='text' name='pois[]' />
<a onclick="window.open('file.php', 'searchPoi', 'width=800, height=500')" class='btn btn-default' id='searchPoiBtn'>Edit</a>

我正在尝试做的是，在打开的弹出页面（file.php）上，根据用户在中选择的内容，将最近文本框的内容修改为该按钮（在父页面上）弹出窗口。

我知道.closest（）是如何工作的，但在处理父窗口时却无法正常工作..有什么想法吗？

Answer 1

编辑：这是一个使用跨文档消息传递的简单自引用示例，因为您在其中一条评论中提到了这一点。我在底部包括我的原始笔记，讨论了其他可用的通信技术。

如果将其保存为文档message.html的正文，它将尝试在新窗口中打开，并且在新窗口中打开时，它将尝试将简单的静态字符串发送回父级窗口。显然，您可以在弹出窗口中使用您想要的任何代码来发送任何事件的消息。

<input type="text" />
<a class='new-tab'>click me</a>

<script>
    (function () {
        var input = null;
        window.onmessage = function (m) {
            console.log(input, m, m.data);
            if (input && 'value' in input) {
                console.log('we have an input', m.data);
                input.value = m.data;
            }
        };
        var el = document.querySelector('a.new-tab');
        el.addEventListener('click', function (e) {
            input = this.previousElementSibling;
            var cwin = window.open('message.html', 'searchPoi', 'width=800, height=500');
        });

        var owin = window.opener;
        if (owin) owin.postMessage('contents to put in the input', '*');
    })();
</script>

原始答案：

由于您要打开一个新的浏览器窗口/选项卡，这不是一个简单的解决方案。浏览器通常设计为＆＃34; sandbox＆＃34;页面（例如，您是否真的想要在浏览器中打开的网站能够访问您在另一个标签页中打开过的银行帐户网站？）

但假设您可以控制两个窗口，则可以使用各种技术在选项卡之间进行通信。

有些涉及通过服务器（WebSocket，EventSource，长轮询XHR）。您的子页面可以向您的服务器发送消息，如果＆＃34;父母＆＃34;页面有一个打开的WebSocket等，它可以将消息转发回原始页面。

其他方法允许在窗口/标签之间进行直接通信，例如cross document messaging，channel messaging，broadcast channels等。

浏览器兼容性也可能是一个问题，具体取决于您需要支持哪些浏览器。最好的选择是选择一个，例如跨文档消息，并玩它。看看你能不能做到你想做的事。

此外，您可能想要一个比内联管理更强大的onclick事件。您需要跟踪点击中的this或event.target，至少足以识别相邻的input。（并且您无法使用closest来识别最近的兄弟。closest专门处理父/祖先标记。）

jQuery窗口开启元素

1 个答案: