Funktion um Datei Download zu starten


strukturart

Erfahrenes Mitglied
Hallo,

ich habe einen RSS-Reader/Podcast downloader für KaiOs(DumbPhone) geschrieben.

strukturart/rss-reader

Leider schaffe ich es nicht mit -Javascript eine Datei Download zu starten.

ich habe folgendes probiert:

Code:
if ($(":focus").hasClass("podcast")) {
               //window.location.assign(link_download);
               $('a#download-button').attr("href", link_download);

               $('a#download-button').css("background", "yellow");
               $('a#download-button').focus();
               $('a#download-button').click();

               alert($('a#download-button').attr("href"))
               }

Was mache ich falsch ?
 

Sempervivum

Erfahrenes Mitglied
Wann wird denn dieses JS ausgeführt? Hoffentlich nicht beim Laden der Seite, denn dann hat sicher noch nichts den Focus.
 

strukturart

Erfahrenes Mitglied
Nein nicht beim laden der Seite, es ist eine aktive Aktion des Users. Er kann die Podcast anhören oder downloaden. Mit window.location.assign(link_download); funktioniert der download bei einige Quellen jedoch nur wenn die url mit .mp3 || .ogg || .... endet. Manche urls enden jedoch mit ...?lang=de&..... dann funktioniert es nicht.
 

Sempervivum

Erfahrenes Mitglied
Wundert mich, dass der Browser Audiodateien herunter lädt statt sie abzuspielen. Es gibt ja das Attribut "download", mit dem man normaler Weise erzwingen kann, dass ein Link zum Download angeboten wird. Hast Du das schon drin?
 

Sempervivum

Erfahrenes Mitglied
Ich habe mal eine Testdatei mit statischen Links und Buttons gebaut mit dem Ergebnis, dass es mit Vanilla-JS funktioniert, mit jQuery jedoch nicht. Googeln nach diesem Problem findet dieses:
Das EDIT von UweB sagt mehr oder weniger aus: "It's not a bug, it's a feature", d. h. von jQuery so gewollt.
Und deine Vermutung, dass das Klick mit jQuery nicht genau so funktioniert wie das mit der Maus trifft offenbar zu.
Lösung, indem man den Klick mit Vanilla-JS anwendet.
 

basti1012

Erfahrenes Mitglied
ich würde das mal ohne a versuchen
Code:
 $('#download-button').click();

das macht man so wie du es gezeigt hast mit klassen.( mit id kenne ich das nicht )

EDIT: Nach dem ich den Beitrag von @Sempervivum gelesen habe kann es sein das dies hier keine Wirkung hat
 

Sempervivum

Erfahrenes Mitglied
das macht man so wie du es gezeigt hast mit klassen.( mit id kenne ich das nicht )
Trifft teilweise zu, insoweit, dass eine ID sowieso schon dokumentweit eindeutig ist und nicht weiter eingegrenzt werden muss. Ich bin mir aber ziemlich sicher, dass es mit dem a davor auch funktioniert, weil es ein gültiger Selektor ist.
 

strukturart

Erfahrenes Mitglied
Oder waere es moeglich mit einer Regex die URL zu splitten so das nach .mp3/.ogg/... nichts mehr kommt und der Browser die Datei downloaded ?
 

basti1012

Erfahrenes Mitglied
Geht das mit dein download link den nicht ?
Habe das mal gerade getestet und eine normale Musik Datei kann ich öffnen oder Downloaden
Code:
<a href="44-sounds/bell_ring.ogg" download><h3>Datei downloaden</h3></a>
<br>
<a href="44-sounds/bell_ring.ogg"><h3>Datei höhren</h3></a>
Da würde auch das click() mit Vanilla JS gehen was sempervivum da schon geschrieben hatte.

Vieleicht machst du mal eine Demo fertig wo man sehen kann wo das problem ist ?
PS: Link kann man splitten , aber ob das hilft bei deinen vorhaben ?

Man könnte den Datei Download auch mit Php machen.
 

strukturart

Erfahrenes Mitglied
Code:
($('#lnk')[0].click())
Wenn die Download-Dateien mit mp3 ogg.... enden funktioniert der Download jedoch nicht wenn z.B.: ?var=xyz an die url angehängt wird, dann öffnet der Browser ein neues Fenster.

Ich habe das App auf Github: strukturart/rss-reader
 

Sempervivum

Erfahrenes Mitglied
Ich habe versucht, das zu reproduzieren, aber ohne Erfolg, ein MP3 wird problemlos herunter geladen.
Code:
    <a id="lnk-simple" href="thread367-grid-hightlight-row-2.html" download>Simple File</a>
    <a id="lnk-get" href="testget.php?abc=11111&def=22222" download>GET parameters</a>
    <a id="lnk-audio-get" href="audio\01_-_The_Greatest_Cowboy_Of_Them_All.mp3?abc=11111&def=22222" download>GET
        parameters audio</a>
    <button id="btn-simple">Simple File</button>
    <button id="btn-get">GET parameters</button>
    <button id="btn-audio-get">GET parameters audio</button>
    <script>
        $('#btn-simple').on('click', () => {
            $('#lnk-simple')[0].click();
        });
        $('#btn-get').on('click', () => {
            $('#lnk-get')[0].click();
        });
        $('#btn-audio-get').on('click', () => {
            $('#lnk-audio-get')[0].click();
        });
    </script>
 

Sempervivum

Erfahrenes Mitglied
Daran hatte ich auch schon gedacht, ob sich die Browser vielleicht unterschiedlich verhalten. Hast Du die Möglichkeit, einen anderen zu testen?
Wenn alle Stricke reißen, könntest Du die URL-Parameter auch durch ein replace aus der URL entfernen, etwa so:
url = url.replace(/\?.*$/, '');
 

strukturart

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied
Mir war bisher nicht bewusst, dass die Dateien auf einem fremden Server liegen. Da scheint es auch für den Download so eine Art SOP zu geben, ich finde dies:
Die Lösung mit einem Proxy, die dort angegeben ist, funktioniert in meiner Testumgebung.
 

basti1012

Erfahrenes Mitglied
Ja ,bei mir geht das auch.Nette funktion die ich so noch nicht kannte und bis jetzt auch immer anders gemacht habe.
Dort schreibt ja einer
Darüber hinaus würde ich empfehlen, die Song-Datei auf Ihrem Server zu speichern, damit neue Anforderungen für diesen Song einfach wieder von Ihrem Server heruntergeladen werden können.
( wenn richtig übersetzt ).
Ist das besser ?
Man kann ja eigentlich froh sein das dann Datenvolumen und Serverauslastung ( wenn man das so nennt ) beim Fremdserver ist.
Was meint ihr dazu ?
 

Sempervivum

Erfahrenes Mitglied
Man kann ja eigentlich froh sein das dann Datenvolumen und Serverauslastung ( wenn man das so nennt ) beim Fremdserver ist.
Das ist ziemlich egoistisch gedacht :D Aber die Ladezeit des externen Servers kommt ja bei einem Proxy zu der eigenen Ladezeit hinzu. Hat man solch einen Cache, entfällt erstere.
Ich habe mal an einem Projekt mit gearbeitet, wo die Reaktionszeiten der fremden Server ziemlich schwach waren und außerdem eine Vielzahl von Dateien geladen werden mussten. Da kam man an die Grenzen eines shared Hostings und es ging nicht ohne einen Cache.
 

strukturart

Erfahrenes Mitglied
Für die Lösung mit dem Proxy brauche ich PHP ? Das kann ich bei KaiOs nicht verwenden da geht nur JS.
Jedoch gibt es noch im OS die -Möglichkeit von JS Ebene Shell Befehle auszuführen z.B.: cUrl.
 

strukturart

Erfahrenes Mitglied
Ich bin eine Schritt weiter und am testen:

Javascript:
 fetch(link_download)
                   .then(res => res.blob())
                   .then(blob => {

                       var sdcard = navigator.getDeviceStorage("music");
                       var file = new Blob([blob], { type: "audio/mpeg" });

                       var request = sdcard.addNamed(file, title + ".mp3");

                       request.onsuccess = function() {
                           var name = this.result;
                           toaster('File "' + name + '" successfully wrote on the storage area');
                       }

                       // An error typically occur if a file with the same name already exist
                       request.onerror = function() {
                           alert('Unable to write the file: ' + this.error);
                       }
                   });