导出 div 内容的脚本在 Chrome 中有效，但在 Firefox 中无效

Question

我有以下将 div 内容导出为文本的脚本：

JAVASCRIPT

  <script type="text/javascript">

      // Wait for the page to load first
        window.onload = function() {

          //Get a reference to the link on the page
          // with an id of "mylink"
          var a = document.getElementById("exportxt");

          //Set code to run when the link is clicked
          // by assigning a function to "onclick"
          a.onclick = function() {

            // Your code here...


function downloadInnerHtml(filename, elId, mimeType) {
    var elHtml = document.getElementById(elId).innerHTML;
    var link = document.createElement('a');
    mimeType = mimeType || 'text/plain';
    link.setAttribute('download', filename);
    link.setAttribute('href', 'data:' + mimeType  +  ';charset=utf-8,' + encodeURIComponent(elHtml));
    link.click(); 
}
var fileName =  'meucanvas.txt'; // You can use the .txt extension if you want
downloadInnerHtml(fileName, 'editor','text/plain');
            //If you don't want the link to actually 
            // redirect the browser to another page,
            // "google.com" in our example here, then
            // return false at the end of this block.
            // Note that this also prevents event bubbling,
            // which is probably what we want here, but won't 
            // always be the case.
            return false;
          }
        }

</script>

HTML

<div style="float:left; padding-left:5px;">
    <a id="exportxt">
    <label>
    <button type="submit" value="#" style="border: 0; background: transparent">
        <b>CLICK HERE DOWNLOAD AS TXT</b>
    </button>
    </label>
    </a>
    </div>




    <div id="editor">
        </br>
    </br>




    TEXT TEXT TEXT

http://jsfiddle.net/JVke4

但是，它在 Firefox 中不起作用。在 Chrome 中工作。如何让它跨浏览器兼容？

是onclick事件吗？

Answer 1

问题不一定是window.onload。

你的问题是你没有在页面上添加链接元素，试试这个：

function downloadInnerHtml(filename, elId, mimeType) {
    var elHtml = document.getElementById(elId).innerHTML;
    var link = document.createElement('a');
    mimeType = mimeType || 'text/plain';
    link.setAttribute('download', filename);
    link.setAttribute('href', 'data:' + mimeType  +  ';charset=utf-8,' + encodeURIComponent(elHtml));
    link.style.cssText = "position: aboslute !important; left: -9999px; visibility: hidden;";//hide element
    link.innerHTML = "text";
    document.body.appendChild(link);
    link.click(); 
    setTimeout(function(){
        document.body.removeChild(link);//remove element
    }, 1);
}

// Wait for the page to load first
window.onload = function() {

  //Get a reference to the link on the page
  // with an id of "mylink"
  var a = document.getElementById("exportxt");

  //Set code to run when the link is clicked
  // by assigning a function to "onclick"
  a.onclick = function() {

    // Your code here...
    var fileName =  'meucanvas.txt'; // You can use the .txt extension if you want
    downloadInnerHtml(fileName, 'editor','text/plain');
    //If you don't want the link to actually 
    // redirect the browser to another page,
    // "google.com" in our example here, then
    // return false at the end of this block.
    // Note that this also prevents event bubbling,
    // which is probably what we want here, but won't 
    // always be the case.
    return false;
  }
}

提示：

在某些浏览器中，您可能使用属性下载不起作用（可能是手机） 试试application/octet-stream，例如：

function downloadInnerHtml(filename, elId, mimeType) {
    var elHtml = document.getElementById(elId).innerHTML;
    var link = document.createElement('a');
    mimeType = mimeType || 'application/octet-stream';
    link.setAttribute('download', filename);
    link.setAttribute('href', 'data:' + mimeType  +  ';charset=utf-8,' + encodeURIComponent(elHtml));
    link.style.cssText = "position: aboslute !important; left: -9999px; visibility: hidden;";//hide element
    link.innerHTML = "text";
    document.body.appendChild(link);
    link.click(); 
    setTimeout(function(){
        document.body.removeChild(link);//remove element
    }, 1);
}
...
downloadInnerHtml('test.txt', 'editor');//force download

Answer 2

您的问题出在 window.load 函数中，该函数未在 Firefox 中触发。尝试改用 JQuery $(document).ready() 和其他 JQuery 函数（用于单击等）。 JQuery 为您处理那些跨浏览器的东西。

检查一下：

window.onload function doesn't work on Mozilla Firefox