打开自定义创建的 .ics 文件时，Iphone 中 safari 的奇怪行为

Posted 2023-03-14

【中文标题】打开自定义创建的 .ics 文件时，Iphone 中 safari 的奇怪行为

【英文标题】：Strange behaviour on safari in Iphone when opening custom created .ics file

【发布时间】：2018-05-02 08:34:05

【问题描述】：

我正在使用 javascript 创建自定义 .ics 文件。当我尝试在我的桌面上打开它时效果很好，但是当我在我的 iPhone 上使用 safari 打开它时，它有一个奇怪的行为，它会打开一个新屏幕以将事件添加到日历中，但它会立即关闭。 见视频：https://vimeo.com/267547030

这是代码：

html：

<a id="test">Demo</a>

JS：

  var icsMSG = "BEGIN:VCALENDAR\n" +
"VERSION:2.0\n" +
"PRODID:-//www.marudot.com//iCal Event Maker\n" +
"CALSCALE:GREGORIAN\n" +
"BEGIN:VTIMEZONE\n" +
"TZID:Asia/Damascus\n" +
"TZURL:http://tzurl.org/zoneinfo-outlook/Asia/Damascus\n" +
"X-LIC-LOCATION:Asia/Damascus\n" +
"BEGIN:STANDARD\n" +
"TZOFFSETFROM:+0300\n" +
"TZOFFSETTO:+0200\n" +
"TZNAME:EET\n" +
"DTSTART:19701030T000000\n" +
"RRULE:FREQ=YEARLY;BYMONTH=10;BYDAY=-1FR\n" +
"END:STANDARD\n" +
"BEGIN:DAYLIGHT\n" +
"TZOFFSETFROM:+0200\n" +
"TZOFFSETTO:+0300\n" +
"TZNAME:EEST\n" +
"DTSTART:19700327T000000\n" +
"RRULE:FREQ=YEARLY;BYMONTH=3;BYDAY=-1FR\n" +
"END:DAYLIGHT\n" +
"END:VTIMEZONE\n" +
"BEGIN:VEVENT\n" +
"DTSTAMP:20180502T071600Z\n" +
"UID:[e-mail]\n" +
"DTSTART;TZID=\"Asia/Damascus\":20180509T120000\n" +
"DTEND;TZID=\"Asia/Damascus\":20180510T120000\n" +
"SUMMARY:scaxczads\n" +
"END:VEVENT";

  $('#test').click(function () 
    window.open( "data:text/calendar;charset=utf8," + escape(icsMSG));
  );

【问题讨论】：

您是否尝试过使用第三方工具生成 .ics 文件，并比较是否与您拥有的相同？ apps.marudot.com/ical

你需要escape()吗？

更新：我已经在 J​​SFiddle jsfiddle.net/qbnkd473/2 中测试了您的代码，并在 BrowserStack 上一直测试到 ios7 Safari，它仍然有效。但是，我可以看到，您的 ICS 字符串最后缺少尾随 END:VCALENDAR。如果添加它会解决您的问题吗？

@Terry 这正是我所做的。我将 .ics 文件的内容复制粘贴到我的 js 中。我尝试添加您所说的内容，但仍然无效。虽然，经过多次测试，它有时可以完美运行，有时会像我发送的视频中那样表现。当我使用您提到的网站并从那里下载 ics 文件时，它总是有效，所以我真的不确定我在这里错过了什么

@Terry 在您发送的小提琴上的行为相同。请参阅：vimeo.com/267556152 奇怪的是，当我从 apps.marudot.com/ical 下载文件时，它并没有要求我允许日历邀请。

【参考方案1】：

我正在使用库：Datebook 1: https://www.npmjs.com/package/datebookfor 从自定义数据生成 .ics 文件。还支持谷歌日历、雅虎日历、Outlook 日历。

escape() 现在已弃用，您应该改用 encodeURI()。

iCal 场景：

对于大型设备浏览器，我下载了我正在使用的 .ics 文件：

   const icalendar = new ICalendar(this.config);
   icalendar.download();

这会下载 .ics 文件，当您打开它时，您可以将其添加到默认日历中。

对于我正在使用的移动设备浏览器

   const icalendar = new ICalendar(this.config);
   window.open('data:text/calendar;charset=utf8,' + encodeURI(icalendar.render()));

icalendar.render() 生成 .ics 文件，如下所示：