Safari blob下载影响表单提交 - 结果表单发布后下载而不是在新标签中打开

Question

Download file option (using blob) is present along with another form submit option on a single page. 下载文件选项（使用blob）与单个页面上的另一个表单提交选项一起出现。 The form result gets downloaded instead of opening in a new tab when download option is selected before form submit. 在表单提交之前选择下载选项时，将下载表单结果而不是在新选项卡中打开。

This happens only in Safari . 这只发生在Safari中 。 Rest of the browsers works as expected. 其余的浏览器按预期工作。

Safari version 11.0.1 Safari版本11.0.1
macOS Sierra version 10.12.6 macOS Sierra版本10.12.6

Example jsfiddle - https://jsfiddle.net/e8n9982f/ 示例jsfiddle - https://jsfiddle.net/e8n9982f/

var $button1 = $("#btn-1");
var $button2 = $("#btn-2");

// Save Locally
$button1.on('click', function() {
  if (typeof(Blob) !== "undefined" && !!new Blob()) {
    var codeToSave = '<!doctype html>' +
      '<html lang="en">' +
      '<head>' +
      '</head>' +
      '<body>' +
      '<h1>Hello, world!</h1>' +
      '</body>' +
      '</html>';

    var codeBlob = new Blob([codeToSave], {
      type: "text/html"
    });
    var codeSaveAsURL = window.URL.createObjectURL(codeBlob);
    var fileNameToSaveAs = "temp-file.html";

    if (window.navigator && window.navigator.msSaveOrOpenBlob) { // For IE, Edge
      window.navigator.msSaveOrOpenBlob(codeBlob, fileNameToSaveAs);
    } else {
      var downloadLink = document.createElement("a");
      downloadLink.download = fileNameToSaveAs;
      downloadLink.href = codeSaveAsURL;
      downloadLink.style.display = "none";
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
    }

    window.URL.revokeObjectURL(codeBlob);
    codeSaveAsURL = null;
    codeBlob = null;
  }

  return false;
});

// Open in JSFiddle
$button2.on('click', function() {
  var form = document.createElement("form");
  form.id = "submitToFiddle";
  form.style.display = "none";
  form.method = "post";
  form.action = "https://jsfiddle.net/api/post/library/pure/";
  form.target = "check";
  //        form.target = "_blank";

  var input = document.createElement("textarea");
  input.name = "html";
  input.innerHTML = '<h1>Fiddle!</h1>';
  document.body.appendChild(form);
  form.appendChild(input);;

  input = document.createElement("input");
  input.type = "submit";
  form.appendChild(input);
  form.submit();
  document.body.removeChild(form);
  return false;
});

To reproduce the issue in Safari, first click on the 'Save Locally' button and then the 'Open in JSFiddle' button. 要在Safari中重现该问题，首先单击“本地保存”按钮，然后单击“在JSFiddle中打开”按钮。

If 'Open in JSFiddle' button is clicked first and then the 'Save Locally' button, it works as expected. 如果首先单击“在JSFiddle中打开”按钮，然后单击“本地保存”按钮，它将按预期工作。

I am unable to find any reference to why Safari is behaving this way. 我无法找到任何关于Safari为何如此表现的参考。

Answer 1

I had the same issue Clicking a download link in Safari causes all target=_blank links to download when clicked, is there a workaround? 我有同样的问题点击Safari中的下载链接会导致所有target = _blank链接在点击时下载，是否有解决方法？

There was no workaround unless I set to _self for the target, which sucked. 除非我为目标设置为_self，否则没有解决方法。 But I've recently updated to Safari 11.1.1 and the issues seems to be resolved 但我最近更新到Safari 11.1.1并且问题似乎已得到解决

Safari blob下载影响表单提交 - 结果表单发布后下载而不是在新标签中打开

问题描述

1 个解决方案

解决方案1
0 2018-06-28 19:23:15

Safari blob下载影响表单提交 - 结果表单发布后下载而不是在新标签中打开

问题描述

1 个解决方案

解决方案1 0 2018-06-28 19:23:15

解决方案1
0 2018-06-28 19:23:15