"Сохранить изображение как..." не работает в Google Chrome при использовании window.open() и document.write()
В моем приложении мне нужно разрешить пользователю щелкнуть правой кнопкой мыши изображение, чтобы сохранить изображение на диск. Тем не менее, я заметил, что с моим конкретным кодом, 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/stackru.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
,
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/stackru.company/img/logos/so/so-icon.png" />');
tab.document.location = "#";
}
</script>
</head>
<body>
<button onclick="foo();">Open</button>
</body>
</html>');