从动态创建的窗口下载文本文件答案

【问题标题】：Download text file from dynamically-created window从动态创建的窗口下载文本文件
【发布时间】：2015-10-16 20:12:34
【问题描述】：

我正在尝试创建一个小书签，它允许教师突出显示网页上的文本并将该选择下载为纯文本 (.txt) 文件。我设置了a demo page 以显示我的工作内容以及我遇到的问题。

在演示页面上，我可以突出显示文本并使用“下载选择”按钮直接下载。但是，如果您错误地突出显示，则必须返回并再次执行。 “制作页面”按钮抓取突出显示的文本并创建一个带有文本的弹出窗口以进行校对。

script.js

function makePage(text) {
  var text = "";
  if(typeof window.getSelection != "undefined") {
    text = window.getSelection().toString();

    var newPage = window.open("", null, "height=200,width=300,status=yes,menubar=no");
    newPage.document.write("<body><a id='download' download='text.txt'></a><p id='copy'>" + text + "</p><button id='download' onclick='getPlainText()'>Download</button><scipt type='text/javascript' src='script.js' defer></script></body></html>");
    console.log(text)
  }
}

function getPlainText(copy) {
  var text = "";
  if(typeof window.getSelection != "undefined") {
    text = window.getElementById('copy').innerContent;

    var download = document.getElementById('download');
    download.href = 'data:text/plain;charset:utf-8,' + encodeURIComponent(text);
    var event = new MouseEvent('click');
    download.dispatchEvent(event);
  }
  return text;
}

当我单击弹出窗口上的“下载”按钮时，控制台中出现 TypeError：

Uncaught TypeError: window.getElementById is not a function

我已经在文档中移动了脚本，但是无论它在哪里，错误都会返回，我不知道为什么。关于如何让它发挥作用的任何想法？

【问题讨论】：

标签： javascript dom

【解决方案1】：

正确的语法是

document.getElementById()

试试

function getPlainText(copy) {
  var text = "";
  if(typeof window.getSelection != "undefined") {
    text = document.getElementById('copy').innerContent;

    var download = document.getElementById('download');
    download.href = 'data:text/plain;charset:utf-8,' + encodeURIComponent(text);
    var event = new MouseEvent('click');
    download.dispatchEvent(event);
  }
  return text;
}

【讨论】：

【解决方案2】：

window 对象没有 getElementById 方法。改用 document.getElementById

【讨论】：

【解决方案3】：

您正试图从不提供该函数的对象调用函数。

您应该调用document.GetElementById()，而不是调用window.getElemenyById()。

所以为了进一步澄清，这里是您的代码，经过适当的更正。

function getPlainText(copy) {
  var text = "";
  if(typeof window.getSelection != "undefined") {
    //Here from window to document
    text = document.getElementById('copy').innerContent;

    // Ironically you used "document" here ;]
    var download = document.getElementById('download');
    download.href = 'data:text/plain;charset:utf-8,' + encodeURIComponent(text);
    var event = new MouseEvent('click');
    download.dispatchEvent(event);
  }
  return text;
}

两者之间的详细区别，由用户Bergi 的回答提供。

窗口对象代表当前的浏览上下文。它拥有诸如 window.location、window.history、window.screen、 window.status 或 window.document。此外，它还有关于框架设置（框架、父级、顶部、自身属性），以及持有重要的接口，如applicationCache、XMLHttpRequest、 setTimeout、escape、console 或 localStorage。最后但并非最不重要的充当 JavaScript 的全局范围，即所有全局变量都是它的属性。

相比之下，(window.)document 对象表示的是 DOM，即当前加载在窗口中 - 它只是它的一部分。一个文件保存诸如 documentElement（通常）、表单之类的信息集合、cookie 字符串、它的位置或它的 readyState。它还实现了不同的接口（可能有多个文档，例如通过 ajax 获得的 XML 文档），带有 getElementById 或 addEventListener 等方法。

【讨论】：