Question

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

由于所有其他主流浏览器（包括移动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像其他浏览器一样工作（即无需首先选择{{1} }}

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/stackoverflow/company/img/logos/so/so-icon.png" />');
            tab.document.location = "#";
        }
    </script>
</head>
<body>
    <button onclick="foo();">Open</button>
</body>
</html>');

＆＃34;将图像另存为...＆＃34;使用window.open（）和document.write（）

1 个答案: