EventListener 未触发 - 动态创建和下载日历事件

Question

我正在获取 outlook 日历事件的纯文本并将它们转换为 ics 以使用 Tampermonkey 下载。

几年前我写这篇文章时按钮起作用了，但现在不行了。 我不确定我现在是否需要授予权限，或者是否有其他原因破坏了它。 该按钮添加得很好，但我无法触发事件侦听器。

// .....
// @grant        none
//=====    convert text only calendar to a donwloadable ICS file
elementReady('#desc-content').then((element) => {
  //grab the relevant text
  if (element.innerHTML.includes("BEGIN:VCALENDAR")) {
    //clean up some bit
    var calendar = element.innerHTML.substring(0, element.innerHTML.length - '<div class="clearfix"></div>'.length).replace(/<br\s*[\/]?>/gi, '\n');
    //Create a button element 
    var CalendarEventButton = document.createElement("button");
    CalendarEventButton.innerHTML = 'Download Calendar Event';

    CalendarEventButton.addEventListener("click", function() {
      var filename = "CalendarInvite.ics"; //File name that will be downloaded
      download(filename, calendar); //passing in the file name and text to be downloaded
    }, false);

    element.appendChild(CalendarEventButton); //append the button to the document
  }
});


/* Download an embedded file/text*/
function download(file, text) {

  //creating an invisible element
  var element = document.createElement('a');
  element.setAttribute('href',
    'data:text/calendar;charset=utf-8, ' +
    encodeURIComponent(text));
  element.setAttribute('download', file);

  // Above code is equivalent to
  // <a href="path of file" download="file name">

  document.body.appendChild(element);

  //onClick property
  element.click();

  document.body.removeChild(element);
}

Answer 1

1. 使用const (ES2015+) 而不是var (<= ES5)。
2. 克隆元素以便以更可靠的方式删除div.clearfix 。
3. 使用的模板字符串（`....`）。
4. 使用本机GM_download方法更容易/可靠的下载。

// .....
// @grant        GM_download
//=====    convert text only calendar to a donwloadable ICS file
elementReady('#desc-content').then((element) => {
  // grab the relevant text
  const cloned = element.cloneNode(true);

  if (!cloned.innerText.includes("BEGIN:VCALENDAR")) return;

  // clean up some bit

  // use the cloned element so that removing clearfix div
  // won't affect DOM
  cloned.querySelector('.clearfix')?.remove();
  const calendar = cloned.innerHTML.replace(/<br\s*[\/]?>/gi, '\n');

  // Create a button element 
  const calendarEventButton = document.createElement("button");
  calendarEventButton.innerHTML = 'Download Calendar Event';

  calendarEventButton.addEventListener("click", function() {
    const filename = "CalendarInvite.ics"; // File name that will be downloaded

    download(filename, calendar); // passing in the file name and text to be downloaded
  }, false);

  element.appendChild(calendarEventButton); //append the button to the document
});


/* Download an embedded file/text*/
function download(file, text) {
  const encoded = encodeURIComponent(text);
  const downloadable = `data:text/calendar;charset=utf-8, ${encoded}`;

  GM_download(downloadable, file);
}