Fremde ics Daten auf eigener Homepage anzeigen

[The_C]

Hallo,
gibt es eine Möglichkeit von einer fremden Homepage bereitgestellte ics Daten auf der eigenen Homepage abzubilden die sich dann auch automatisch aktualisieren?

 

[mikdoe]

Ja klar. Was man als Mensch anzeigen lassen kann, kann grundsätzlich auch die Maschine abrufen; mit ein paar Ausnahmen die man als unpraktikabel bezeichnen würde. Aber dafür müssen einige Voraussetzungen erfüllt sein. Wie sieht denn deine Infrastruktur aus in die die Kalendertermine rein sollen?

 

[The_C]

OK das ist schon mal gut zu hören!
Ich hab auch schon mal etwas geforscht wie so etwas funktionieren würde und ich komme immer auf Ajax.

Auf meiner HP möchte ich das ganz simpel ausgeben das sind die ics Felder die ich benötige:

ATTACH;FMTTYPE=image/jpeg:
SUMMARY: mit URL:
DTSTART;VALUE=DATE
LOCATION:

diesen Code hab ich mal erstellt: https://jsfiddle.net/The_C/z10yteqp/

Nur bekomme ich keine Ausgabe und was ich noch nicht weis weshalb nur beim dataType: "jsonp" funktioniert bei jedem anderen Format wie text html usw. bekomme ich einen:

Access to XMLHttpRequest at 'https://ifbb.com/events/?ical=1' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

auch mit reinem JS bekomme ich das nich hin wo liegt mein Fehler?
https://jsfiddle.net/The_C/z10yteqp/11/

 

[mikdoe]

Etwas gekürzt formuliert: mit Javascript kannst du in einem Browser keine Daten von einem fremden Server laden.
Ausführlicher gibt es das hier: https://de.wikipedia.org/wiki/Same-Origin-Policy und https://www.mittwald.de/faq/tipps-und-tricks/sonstiges/was-ist-cors

Ich würde es nicht im Browser mit JS sondern vom Server aus machen, z. B. mit https://www.php.net/manual/de/book.curl.php (vorausgesetzt du hast PHP zur Verfügung)

P. S.: JSONP ist eher für JSON Formate geeignet. Dein URL liefert aber eine echte ICal Datei. Das passt also sowieso schon mal gar nicht.
P. S. 2: man kann natürlich auch an den Server Headern rum basteln, wenn man dazu berechtigt ist (bei shared hosting nicht selbstverständlich) und weiß was man tut. Davon rate ich in diesem Fall strikt ab!

 

[The_C]

Danke für die Antwort.

 

[mikdoe]

Kommst du denn jetzt damit weiter?

 

[daniel220786]

Versuche es mal mit der fetch Api.

 async function getUpdate(){

        let res = await fetch('https://ifbb.com/events/?ical=1&tribe_display=list/ifbb-815efdd4c61.ics', {
          method: 'GET',
          headers: {
            "Content-type": "application/json; charset=UTF-8"
          },
          mode:'no-cors'
        });
        data = await res;
      console.log(data);
 }
getUpdate()

Bei mir klappt das so

Vielleicht musst du noch den Content-type ändern, obwohl es so auch geht

 

[mikdoe]

@daniel: sehr gut! Dies scheint eine recht gute Doku dazu zu sein: https://javascript.info/fetch-crossorigin

Habe ich noch nie benutzt. Und habe ich das richtig verstanden, dass das nur geht, weil der Server ifbb.com das zulässt? Wenn der Betreiber das merkt und einschränkt, ist Feierabend, richtig?

 

[daniel220786]

Habe ich noch nie benutzt. Und habe ich das richtig verstanden, dass das nur geht, weil der Server ifbb.com das zulässt? Wenn der Betreiber das merkt und einschränkt, ist Feierabend, richtig?

das kann ich dir ehrlich gesagt auch nicht genau sagen. Ich werde das Mal bei mir versuchen . Habe ja 2 Homepagen , Mal sehen ob das dann noch geht. Ich habe mit der fetch API auch erst vor kurzem angefangen. Normalerweise habe ich immer jquery Ajax genommen, aber wie man in diesen Beispiel ja sieht funktioniert die hier nicht. Habe das auch erst versucht. Aber wie man sieht mit der fetch API klappt es. Die hat mir in solchen Fällen schon öfters geholfe