Question

我正在尝试创建一个小书签，它允许教师突出显示网页上的文本，并将该选择下载为纯文本（.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

我已经在文档中移动了脚本，但无论它在哪里，错误都会返回，我无法弄清楚原因。关于如何使其发挥作用的任何想法？

Answer 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;
}

Answer 2

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

Answer 3

您正在尝试调用不提供该功能的函数和对象。

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

因此，为了进一步澄清，这里有适当修正的代码。

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。）文档对象表示DOM   当前加载在窗口中 - 它只是它的一部分。一个文件   保存像documentElement（通常），表单等信息   集合，cookie字符串，其位置或readyState。它   也实现了不同的接口（可能有多个   文档，例如通过ajax获得的XML文档）   getElementById或addEventListener等方法。

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

3 个答案:

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

3 个答案:

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