在IE 9和10中更改了具有target =“_ blank”行为的表单

时间:2013-02-11 23:04:06

标签: javascript forms tabs internet-explorer-9 internet-explorer-10

我有一个使用类似以下代码的应用在新标签页中打开动态生成的报告。 (为了演示,我嘲笑了这些参数。)

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操作的原因是将参数POST添加到脚本而不是GET参数。

在IE 8及更低版本,Chrome,Firefox等中,这将执行以下两项操作之一:

  1. 如果浏览器可以阅读PDF(通过内置功能或插件),它将打开一个包含报告的新选项卡,这是所需的行为。
  2. 如果浏览器无法读取PDF文件,则会打开新标签页,立即将其关闭,然后下载该文件。
  3. 似乎#2在IE 9及更高版本中发生了变化。它将打开一个新选项卡,但只有一个空白屏幕,直到用户返回原始标签,点击“打开”或“保存”,然后PDF按预期下载。这是一个非常令人困惑的界面。

    我认为解决这个问题的一种方法是生成一个临时PDF文件,然后只需要window.open()。是否有其他方法可以调整此功能的行为?或者是否有推荐的做法,我没有遇到过?

    (注意:这根本不是PDF特定的;浏览器可以下载而不是本地显示的任何文件似乎都有问题。)

    编辑:看起来我的曲线比我意识到的还要多。看起来这也发生在IE9中,我从来没有注意到,因为我没有安装PDF插件或其他文件类型我从未尝试过。

    有趣的是,如果我删除表单中的input字段,上面的代码就像我期望的那样。我不确定为什么浏览器会以不同的方式对待它。当然,在我的情况下,我需要输入POST数据到我的脚本。

    编辑2 :愚蠢的错误。 input是自我关闭的。固定的。

    编辑3 :以下是一些屏幕截图,可以更好地解释此问题。我正在使用this JSBin进行测试。我有一个onclick事件来触发上面的Javascript函数。

    该过程从第一个标签开始。

    First tab, before a click.

    然后,单击文本后,将打开一个新选项卡。但它是空白的!

    Second tab, opened via click.

    事实证明原始(现在隐藏)标签有一条消息,询问是否要打开或保存文件。

    The alert is on the first tab!

    单击“打开”或“保存”将打开文件。但这个过程非常令人困惑,与其他浏览器不一致。

    编辑3 :前进一步,后退一步。如果我使用window.open()创建一个新窗口,然后以编程方式将form.target设置为该窗口的名称,我至少可以在打开的选项卡中获取打开/保存消息...虽然我是更喜欢它像其他浏览器一样立即关闭标签。更糟糕的是,使用该技术,新标签不再立即关闭。也许还有另一种技术?

1 个答案:

答案 0 :(得分:1)

一个解决方案是检测IE和PDF插件的可用性,然后在(&gt; IE9&amp;&amp;!插件)情况下将'target'属性设置为'_self'。我发现PluginDetect声称有AdobeReader插件检测。

总而言之,它是相当丑陋和不可靠的方法,但在某些情况下应该给出结果。