"Save image as.." 在 Google Chrome 使用 window.open() 和 document.write() 时不工作

Question

在我的应用程序中，我需要允许用户右键单击图像以将图像保存到磁盘。但是，我注意到在我的特定代码中，Google Chrome 是唯一不允许用户 "Save image as.." 的浏览器，除非用户先 selects Open image in new tab，然后从那里选择 Save image as..。

由于所有其他主要浏览器（包括移动 Chrome）都按预期工作，我不确定我是否没有以 standard/correct 方式实现我的代码，或者问题是否出在Chrome.

示例：

下面的 HTML 是我正在做的事情的精简版。它将允许您单击一个按钮来打开一个包含图像的新 window。

对于test/confirm我上面描述的问题，右击图片然后select Save image as.. - 你应该注意到没有任何反应。但是，如果您右键单击图像并 select Open image in new tab，您将能够从那里 Save image as..。

<html>
<head>
    <title></title>
    <script>
        function foo() {
            var tab = window.open();
            tab.document.write('<p>Right-click, then click "Save image as ..."</p><img src="http://cdn.sstatic.net/Sites/Whosebug/company/img/logos/so/so-icon.png" />');
        }
    </script>
</head>
<body>
    <button onclick="foo();">Open</button>
</body>
</html>

这是 Chrome 的问题还是有另一种方法我可以使用 window.open() 和 document.write() 让 Chrome 像其他浏览器一样工作（即不必，首先，选择 Open image in new tab.

Answer 1

我找到了一个似乎有效的解决方案。使选项卡具有位置属性。我不确定为什么需要这个，但它在 Chrome 48 上对我有用。

document.write('<html>
<head>
    <title></title>
    <script>
        function foo() {
            var tab = window.open();
            tab.document.write('<p>Right-click, then click "Save image as ..."</p><img src="http://cdn.sstatic.net/Sites/Whosebug/company/img/logos/so/so-icon.png" />');
            tab.document.location = "#";
        }
    </script>
</head>
<body>
    <button onclick="foo();">Open</button>
</body>
</html>');

"Save image as.." 在 Google Chrome 使用 window.open() 和 document.write() 时不工作

"Save image as.." not working in Google Chrome when using window.open() and document.write()

google-chrome

window.open

document.write

save-image