【发布时间】:2013-02-11 23:04:05
【问题描述】:
我有一个应用程序,它使用以下代码在新选项卡中打开动态生成的报告。 (为了演示,我已经模拟了参数。)
function gblPDFWdw(pdf) {
var formDiv = document.createElement("div");
formDiv.innerHTML = "<form method=post action='" + pdf + "' target='_blank'><input type=hidden id=test name=test value='test'></form>";
var form = formDiv.firstChild;
document.body.appendChild(form);
form.submit();
form.parentNode.removeChild(form);
}
pdf 参数只是生成 PDF 的脚本的 URL。 form 操作的原因是将参数POSTed 获取到脚本而不是作为GET 参数。
在 IE 8 及更低版本、Chrome、Firefox 等中,这将执行以下两种操作之一:
- 如果浏览器可以读取 PDF(通过内置功能或插件),它将打开一个带有报告的新选项卡,这是所需的行为。
- 如果浏览器无法读取 PDF,它将打开新标签页,立即关闭它,然后下载文件。
似乎#2 在 IE 9 及更高版本中发生了变化。它将打开一个新选项卡,但只会产生一个空白屏幕,直到用户返回原始选项卡,单击“打开”或“保存”,然后按预期下载 PDF。这是一个非常混乱的界面。
我想解决这个问题的一种方法是生成一个临时 PDF 文件,然后只需 window.open() 即可。还有其他方法可以调整此功能的行为吗?或者有没有我没有遇到过的推荐做法?
(注意:这根本不是 PDF 特定的;浏览器可能下载而不是本地显示的任何文件似乎都有问题。)
编辑:看起来我比我意识到的更落后了。似乎这也发生在 IE9 中,我从来没有注意到,因为我从来没有在没有安装 PDF 插件或其他文件类型的情况下尝试过。
有趣的是,如果我从表单中删除 input 字段,上述代码的工作方式与我预期的一样。我不确定为什么浏览器会以不同的方式对待它。当然,就我而言,我需要将POST 数据输入到我的脚本中。
编辑 2:愚蠢的错误。 input 是自动关闭的。固定。
编辑 3:这里有一些屏幕截图可以更好地解释问题。我正在使用this JSBin 进行测试。我有一个 onclick 事件来触发上面的 Javascript 函数。
该过程从第一个选项卡开始。
然后,单击文本后,将打开一个新选项卡。但它是空白的!
事实证明,original(现在隐藏)选项卡有一条消息,询问是打开还是保存文件。
单击“打开”或“保存”即可正常打开文件。但是这个过程非常混乱,并且与其他浏览器不一致。
编辑 3:前进一步,后退一步。如果我使用window.open() 创建一个新窗口,然后以编程方式将form.target 设置为该窗口的名称,我至少可以在打开的选项卡中获得打开/保存消息……尽管我更喜欢它像其他浏览器一样立即关闭标签。更糟糕的是,使用这种技术,新标签不再立即关闭。也许还有另一种技术?
【问题讨论】:
-
</input>没有结束标签<input>- 它是一个独立的标签。由于 HTML 格式错误,可能无法正常工作。 -
@sbeliv01 好点……愚蠢的错误。但这并没有改变问题。不过谢谢!
-
也许在输入标签中的属性周围添加引号会有所帮助?
<input type='hidden' id='test' name='test' value='test'> -
@sbeliv01 不,刚刚尝试过。我有理由确定这不完全是 HTML 验证问题。新标签打开得很好……只是打开/保存选项出现在 previous 标签上,现在已隐藏。老实说,如果有更好的方法将数据发布到新标签中,我会全力以赴。
-
新标签应该自行关闭,因为它不用于文件下载,被原始页面接管。目标 URL 是否可能与原始页面位于不同的安全区域?您是否在多个客户端上进行了复制?
标签: javascript forms tabs internet-explorer-9 internet-explorer-10