File letöltése HTML-ben JS-el, kattintás nélkül

File letöltése HTML-ben JS-el, kattintás nélkül
2022-11-22T13:22:25+01:00
2022-11-24T12:12:17+01:00
2022-11-24T12:30:34+01:00
Seishin
Sziasztok!

Egy szuper pici és kezdetleges HTML kóddal küzdök.
Azt szeretném, ha amikor megnyílik az oldal, akkor automatikusan elinduljon a file letöltése. Ehhez ezt a kis kódot próbáltam:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a href="files/boci.png" download="files/boci.png">link</a> <script type="text/javascript"> $(document).ready(function (){ $("a").click(); }); </script> </body> </html>
Sajnos nem jövök rá arra, hogy mit hibázok el, mivel ha minden igaz, akkor csak annyit csinálok, hogy ha kész a file, akkor "rákattint" a linkre a function.

Valaki tudna segíteni?

Előre is köszönöm!
Mutasd a teljes hozzászólást!

  • 1. Miért szeretnéd megbüntetni a látogatóidat egy automatikusan a gépükre letöltődő fájllal???
    2. Ha jól tudom a $() a jQuery() rövidítése, szóval ha ilyesmit akarsz a kódodban használni, akkor mindenképp legyen egy munkára fogható jquery az oldaladban: jQuery Get Started
    Mutasd a teljes hozzászólást!
  • Hali!

    Csatlakozva az előttem szólóhoz, ne csinálj ilyet. Bár konkrét infók híján (mit szeretnél pontosan, miért) nem tudok konkrét javaslatot mondani, de biztosan van más megoldás.

    Másrészről, jQuery-vel ugyan elérheted, hogy az adott elemhez kötött kattintás esemény-kezelő lefusson, de az alapértelmezett működést nem tudod előidézni. Használd inkább a DOM-elem „eredeti” kattintás-metódusát, pl.:
    <script> $(function() { $('a').get(0).click(); /* vagy: $('a')[0].click(); */ }); </script>
    Mutasd a teljes hozzászólást!
  • Nem ördögtől való szerintem a dolog. Nekem egyszer kellett hasonló implementáción dolgozni, amikor letöltési funkcionalitást kellett a site-on implementálni. Az egyik oldalon kiválasztja a felhasználó hogy milyen verziót, milyen oprendszerre stb. szeretne letölteni, aztán onnan átdobjuk egy letöltő oldalra. Ezen a letöltő oldalon instrukciókat kap hogy hogyan telepítheti a cuccost, meg közben automatikusan el is kezdjük neki a letöltést.

    Mondjuk ahogy mi implementáltuk, ott nem click eseményt szimuláltunk a letöltő linkre, hanem csak egy rövid timeout után átírta a kód a window.location-t.
    Mutasd a teljes hozzászólást!
  • Egy QR kódokhoz kapcsolódó iskolai projekthez kell, így csak magunkat büntetjük majd vele :)

    Az ötlet, amit meg szeretnénk valósítani, hogy az oldal linkjének lesz egy QR kódja, és amikor beolvasod azt, megnyitja az oldalt, majd ez után automatikusan le kéne töltenie az oldalon lévő filet. (Nagyjából mint egy dinamikus QR kód, csak html oldallal, hogy tudjuk módosítani a letöltendő fileokat.)

    Köszönöm a választ, holnap meg is nézem.
    Mutasd a teljes hozzászólást!
  • Mint ahogy azt a másik kommentelőnek írtam:
    Egy QR kódokhoz kapcsolódó iskolai projekthez kell, így csak magunkat büntetjük majd vele :)

    Az ötlet, amit meg szeretnénk valósítani, hogy az oldal linkjének lesz egy QR kódja, és amikor beolvasod azt, megnyitja az oldalt, majd ez után automatikusan le kéne töltenie az oldalon lévő filet. (Nagyjából mint egy dinamikus QR kód, csak html oldallal, hogy tudjuk módosítani a letöltendő fileokat.)

    Köszönöm a választ, holnap meg is nézem.
    Mutasd a teljes hozzászólást!
  • Nagyjából mint egy dinamikus QR kód, csak html oldallal, hogy tudjuk módosítani a letöltendő fileokat.

    Ehhez nem kell HTML, pontosabban elegánsabb valami szerver oldali kóddal. A szerver oldali kód küldhet egy átmeneti átirányítást (302-es státuszkód) arra az URL-re, ahol a ténylegesen letölteni kívánt fájl van. Így más időpontokban mást tudsz letölteni ugyanarról a linkről, anélkül hogy HTML-t vagy JS-t bele kéne keverni.
    Mutasd a teljes hozzászólást!
  • Az anchor-nak adj explicit id-t (pl.: anchor_id), aztán a jQuery hívás a következő képpen nézzen ki:

    $('#anchor_id').click();
    Mutasd a teljes hozzászólást!
  • Szerintem ehhez nem kellene jQuery

    A dokumentum betöltésekor rá lehet akaszkodni arra az eseményre:
    Window&colon; DOMContentLoaded event - Web APIs

    Majd megkeressük az elemet és meghívjuk a click metódusát.
    HTMLElement.click() - Web APIs

    window.addEventListener('DOMContentLoaded', (event) => { document.getElementsByTagName('a')[0].click() });
    a getElementsByTagName('a') megkeresi az összes linket, ami egy tömb lesz és annak a tömbnek az első elemét vesszük, de ha adsz a linknek egy id-t, akkor arra is hivatkozhatsz (getElementById)
    Mondjuk így sok értelme nincs, mert a link rögtön elnavigál a cél oldalra. Lehet target='_blank' attributumot adni a linkhez, de akkor meg 'előugró ablak'-nak minősül. Egyszerűbb lenne közvetlenül odairányítani a kérést.
    Esetleg egy mate elemmel is át lehet irányítani:
    How do I redirect my site using a META Tag?
    Mutasd a teljes hozzászólást!
  • Mondjuk így sok értelme nincs, mert a link rögtön elnavigál a cél oldalra.

    Ha van download attribútuma, akkor nem navigálni fog a böngésző, hanem letölti a fájlt.
    Mutasd a teljes hozzászólást!
  • Hát ez a megoldás nagyon jónak hangzik, viszont ezt ötletem sincs hogy hogyan lehet megvalósítani, ennyire nem értek a témához :D De azért köszönöm az ötletet.
    Mutasd a teljes hozzászólást!
  • Végső megoldás
    Hát, köszönöm mindenkinek a segítséget, végül PCO és ⊓≡⊺∧⊓ɢ⋿∟
    válasza kombinálva oldotta meg a problémát, így nem tudom, hogy kiét kéne elfogadnom megoldásként... :)

    A működő megoldás:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> </head> <body> <a href="boci.jpg" download="boci.jpg">link</a> <script type="text/javascript"> $(function() { $('a').get(0).click(); }); </script> </body> </html>
    Mutasd a teljes hozzászólást!
  • én csak a jqueryt hiányoltam belőle, szóval nekem nem kell pontot adj :)
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd