JavaScript 将表单数据发布到没有“目标”的新窗口答案

【问题标题】：JavaScript post form data to new window without "target"JavaScript 将表单数据发布到没有“目标”的新窗口
【发布时间】：2011-01-16 04:58:58
【问题描述】：

什么？ 我希望能够在不使用目标属性（XHTML 验证）的情况下向新窗口发出发布请求（不必是表单数据）。

为什么？ 我有一个 webapp（使用 jQuery），用户可以在其中选择要打印的多个条目。每个条目 id 都应该发送到一个处理页面，该页面将显示整个条目的可打印版本。我不想让用户离开 web 应用程序进行打印，并且我不能在弹出窗口中使用 get，因为条目 ID 的数量可能会变得太大而无法放入 URL。

我搜索并阅读了几个论坛，大多数人似乎建议直接使用目标属性或使用 JavaScript 插入它。我希望避免这两种解决方案。

这甚至可能吗？如果可以，怎么做？

提前致谢:)

【问题讨论】：

澄清一下，它必须是 POST 还是 GET 可接受？
@Joe 他说“我不能在弹出窗口中使用 get，因为条目 id 的数量可能会变得太大而无法容纳在 URL 中”
@Josh Ha，请注意。我想以后应该做的更好的略读。
是的，正如乔希所说。可能有太多条目无法使用 get（限制为 256 个字符？）。
只是想感谢大家的帮助。对此，我真的非常感激。我之前在几个论坛上发过帖子，但这肯定有最快的响应时间和最好的答案。谢谢大家:)

标签： javascript forms post popup target

【解决方案1】：

这就是target 属性的用途。将其设置为“_blank”以打开一个新窗口。如果您希望您的标记有效（有什么意义？我向您保证，您的用户可能不太关心您的标记的有效性！），然后使用 Javascript 设置页面加载目标...

window.onload = function() {
  document.forms[0].target = '_blank';
}

没有其他办法。

【讨论】：

好的，谢谢。我只是希望有办法。我想我会选择 ScottEs 解决方案，因为我已经有一个非常强大的 AJAX 后端。

【解决方案2】：

在 Javascript 中，拦截表单提交，用您想要的值填充仅包含隐藏字段的第二个表单，然后提交该表单。

【讨论】：

据我所知，这只会将问题转移到另一个表单...除非此表单在另一个页面上。由于弹出窗口可以与其父级对话（只要它在同一个域中）（我认为）我可以弹出一个带有隐藏表单的新窗口，填充它然后提交（在新窗口中）。这将具有相同的效果。不确定这是否是您的想法，但这让我想到了非常感谢:)

【解决方案3】：

要定位当前页面的顶部并跳出当前使用的任何框架集，您可以在 HTML 中使用<a href="page.htm" target="_top">。在您使用的 Javascript 中：

top.location.href = 'page.htm';

要定位当前页面或框架，您可以在 HTML 中使用<a href="page.htm" target="_self">。在您使用的 Javascript 中：

self.location.href = 'page.htm';

要定位父框架，您可以在 HTML 中使用 <a href="page.htm" target="_parent">。在您使用的 Javascript 中：

parent.location.href = 'page.htm';

要定位框架集中的特定框架，您可以在 HTML 中使用 <a href="page.htm" target="thatframe">。在您使用的 Javascript 中：

top.frames['thatframe'].location.href = 'page.htm';

要定位当前页面中的特定 iframe，您可以在 HTML 中使用 <a href="page.htm" target="thatframe">。在您使用的 Javascript 中：

self.frames['thatframe'].location.href = 'page.htm';

【讨论】：

感谢您的回复，但这不是我要求的。我的问题与框架无关。我希望能够向新窗口（不是框架）发出发布请求。

【解决方案4】：

<form> 元素的属性target 在 XHTML 1.0 中有效transitional..

如果您使用的是 XHTML 1.1 或 1.0 Strict，那么 <iframe> 首先不是有效标签。

【讨论】：

是的，但是我没有使用任何 iframe 标签。
ok 只是框架集然后 .. 所以 .. 只需使用 target 和 xhtml 过渡 :)

【解决方案5】：

您可以使用 Javascript window.open 来“弹出”新窗口并在 URL 中使用 GET 参数来传递参数……但在 IMO 中，它比在过渡文档类型中使用 target 属性更糟糕。

最好的方法是在 DOM 中动态创建一个“假”新窗口，并通过 AJAX 调用填充自身。这样您就不会“破坏”用户体验（通过打开一个新窗口）。

【讨论】：

我曾想过直接在 DOM 中创建一个弹出窗口，但这会在用户打印时出现问题（可能会打印整个页面）。不过感谢您的提示。
请记住，您可以在整个弹出窗口中添加一个“noprint”类，并添加一个“打印”CSS 来显示：该类没有。

【解决方案6】：

如果您在从调用页面打开新窗口之前在打开新窗口的页面中设置了一些隐藏字段（称为 entryIds），则可以在打开的页面中引用它，如下所示：

$(function() {
    var $opener = $(window.opener.document);
    var entryIds = $opener.find("#entryIds").val();
    // do something with the ids
});

这里的缺点是您现在也只能通过 javascript 显示您的条目详细信息。根本不需要做表单发布。

如果您感觉活泼，您可以在打开新窗口之前在打开器页面上的会话或 cookie（通过 Web 服务调用）中设置条目 ID，然后在打开的页面上获取会话，以便您可以而是在服务器端构建打印页面。

【讨论】：

谢谢，没想到会话/cookie 方法。正如你所说，我想我会将它与 AJAX 结合使用。再次感谢:)