11

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

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

例子：

以下 HTML 是我正在做的精简版。它将允许您单击一个按钮以打开一个包含图像的新窗口。

要测试/确认我上面描述的问题，请右键单击图像并选择Save image as..- 您应该注意到没有任何反应。但是，如果您右键单击图像并选择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/stackoverflow/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.

4

1 回答 1

14

我找到了一个似乎可行的解决方案。使选项卡具有位置属性。我不确定为什么需要这样做，但它适用于 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/stackoverflow/company/img/logos/so/so-icon.png" />');
            tab.document.location = "#";
        }
    </script>
</head>
<body>
    <button onclick="foo();">Open</button>
</body>
</html>');
于 2016-12-12T22:00:28.437 回答