WebHU - Programozási kérdések és válaszok

Javascript dinamikus beszúrása a document.write formátumot használó HTML-be

Jelenleg egy lightbox stílusú felugró ablakot töltök be, amely betölti a HTML-kódját egy XHR-hívásból. Ez a tartalom ezután egy „modális” előugró ablakban jelenik meg a element.innerHTML = content használatával. Ez varázslatként működik.

A webhely egy másik részében Flickr „jelvényt” használok (http://www.elliotswan.com/2006/08/06/custom-flickr-badge-api-documentation/) a Flickr képek dinamikus betöltéséhez. Ez egy script címkével történik, amely betölt egy flickr javascriptet, amely viszont néhány document.write utasítást végez.

Mindkettő tökéletesen működik, ha szerepel a HTML-ben. Csak a flickr jelvény kódjának belül az átvilágítódobozban való betöltésekor nem jelenik meg semmilyen tartalom. Úgy tűnik, hogy a innerHTML használata document.write utasítások írásához túl messzire megy, de nem találok semmilyen nyomot a JavaScript-megvalósításokban (FF2&3, IE6&7) erre a viselkedésre.

Valaki elmagyarázná, hogy ennek működnie kell vagy nem? Kösz.

javascript html ajax
10.09.2008

Válaszok:


1

Általánosságban elmondható, hogy a szkriptcímkék nem hajtódnak végre az innerHTML használatakor. A te esetedben ez jó, mert a document.write hívás eltüntetne mindent, ami már benne van az oldalon. Ez azonban minden olyan HTML-dokumentum nélkül marad, amelyet a document.write-nek hozzá kellett volna adnia.

A jQuery HTML-manipulációs módszerei HTML-ben hajtják végre a szkripteket az Ön helyett, a trükk ezután a document.write hívásainak rögzítése és a HTML megfelelő helyre kerülése. Ha elég egyszerű, akkor valami ilyesmi fog működni:

var content = '';
document.write = function(s) {
    content += s;
};
// execute the script
$('#foo').html(markupWithScriptInIt);
$('#foo .whereverTheDocumentWriteContentGoes').html(content);

Bár bonyolulttá válik. Ha a szkript egy másik tartományban van, akkor aszinkron módon töltődik be, tehát várnia kell, amíg elkészül a tartalom beszerzésével. Illetve mi van akkor, ha csak a HTML-t írja be a töredék közepére anélkül, hogy egy könnyen kiválasztható burkolóelem lenne? A writeCapture.js (teljes közzététel: én írtam) kezeli ezeket a problémákat. Azt javaslom, hogy csak használja, de legalább megnézheti a kódot, hogy lássa, hogyan kezel mindent.

SZERKESZTÉS: Itt van egy oldal, amely bemutatja, hogyan hangzik a kívánt hatás.

07.12.2009
  • Érdekes... Kifejlesztettem egy helyettesítőt is a document.write számára, hogy lehetővé tegye a szkriptek dinamikus betöltését: bezen.domwrite (bezen.org /javascript) 08.12.2009
  • Kösz! Régen dolgoztunk ezen, de ez megvalósíthatónak tűnik! 11.12.2009
  • Ez egy igazán okos megoldás. Referenciára mentve! 07.11.2010

    • 2

    Létrehoztam egy egyszerű tesztoldalt, amely bemutatja a problémát:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Document Write Testcase</title>
    </head>
    <body>
        <div id="container">
        </div>
        <div id="container2">
        </div>

        <script>
            // This doesn't work!
            var container = document.getElementById('container');
            container.innerHTML = "<script type='text/javascript'>alert('foo');document.write('bar');<\/script>";

            // This does!
            var container2 = document.getElementById('container2');
            var script = document.createElement("script");
            script.type = 'text/javascript';
            script.innerHTML = "alert('bar');document.write('foo');";
            container.appendChild(script);
        </script>
    </body>
</html>

    Ez az oldal figyelmezteti a „bar” szót, és kiírja a „foo” szót, miközben arra számítottam, hogy figyelmezteti a „foo”-t és kinyomtatja a „bar” szót is. De sajnos, mivel a script címke egy nagyobb HTML-oldal része, nem tudom kiemelni ezt a címkét és hozzáfűzni a fenti példához hasonlóan. Nos, megtehetem, de ehhez meg kell szkennelni a innerHTML tartalmat script címkék után, és a karakterláncban helyőrzőkkel helyettesíteni, majd beilleszteni őket a DOM segítségével. Nem hangzik ez triviálisan.

    10.09.2008

    3

    Használja a document.writeln(content); értéket a document.write(content) helyett.

    A jobb módszer azonban a innerHTML összefűzését használja, például:

    element.innerHTML += content;

    A element.innerHTML = content; metódus lecseréli a régi tartalmat az újra, ami felülírja az elem belső HTML-jét!

    Míg a += operátor használata a element.innerHTML += content-ben a szöveget a régi tartalom után fűzi hozzá. (hasonlóan ahhoz, amit document.write csinál.)

    24.08.2011

    4

    A document.write körülbelül annyira elavult, mint ahogy jönnek. A JavaScript csodáinak köszönhetően azonban saját funkcióját hozzárendelheti a document objektum write metódusához, amely a innerHTML értéket használja az Ön által választott elemen a szállított tartalom hozzáfűzéséhez.

    10.09.2008
  • Igen, de a flickr a document.write-ot használja az API-jában, és nagyon szükségem van a tartalomra a szkript helyén. Nem tudom megváltoztatni az API-t, és a következőre írt elem módosítása nem oldja meg a problémát. 10.09.2008

    • 5

    Kaphatok előbb némi felvilágosítást, hogy megbizonyosodjunk arról, hogy értem a problémát?

    A document.write hívások tartalmat adnak a jelöléshez azon a ponton, ahol előfordulnak. Például, ha egy függvényben document.write hívásokat tartalmaz, de a függvényt máshol hívja meg, akkor a document.write kimenet a jelölés azon pontján történik, ahol a függvény meg van határozva, nem pedig ott, ahol meghívják .

    Ezért ahhoz, hogy ez minden esetben működjön, a Flickr document.write utasításoknak a element.innerHTML = content content részébe kell tartozniuk. Biztosan így van?

    Gyorsan tesztelheti, hogy ennek működnie kell-e, ha egyetlen és egyszerű document.write hívást ad hozzá a tartalomhoz, amely innerHTML-ként van beállítva, és megnézheti, mit tesz ez:

    <script>
  var content = "<p>1st para</p><script>document.write('<p>2nd para</p>');</script>"
  element.innerHTML = content;
</script>

    Ha ez működik, akkor az a koncepció, hogy a document.write egy elem innerHTML-jeként beállított tartalomban működik, működhet.

    Az az érzésem, hogy ez nem fog működni, de a koncepció tesztelése meglehetősen egyszerű.

    10.09.2008
  • A document.write kimenet a jelölés azon pontján fog megtörténni, ahol a függvény definiálva van, nem ott, ahol meghívásra kerül. - Nem igaz, van egy tesztoldalam, amely ezt bizonyítja: jsbin.com/inuka 24.09.2009

    • 6

    Tehát egy DOM metódust használ egy script elem létrehozásához, és hozzáfűzi azt egy meglévő elemhez, és ez a hozzáfűzött script elem tartalmának végrehajtását eredményezi? Ez jól hangzik.

    Azt mondja, hogy a script címke egy nagyobb HTML oldal része, ezért nem lehet kiemelni. Nem tudsz azonosítót adni a szkriptcímkének és megcélozni? Valószínűleg hiányzik itt valami nyilvánvaló.

    10.09.2008

    7

    Elméletileg igen, így tudok kiemelni egy script tag-et. A probléma az, hogy több tucat olyan helyzet áll előttünk, amikor ez előfordul, ezért megpróbálok valamilyen okot vagy dokumentációt találni ennek a viselkedésnek.

    Ezenkívül úgy tűnik, hogy a script címke a betöltés után már nem része a DOM-nak. A környezetünkben a container div üres marad, így nem tudom lekérni a script címkét. Ennek azonban működnie kell, mert a fenti példámban a szkript nem kerül végrehajtásra, de továbbra is a DOM része.

    10.09.2008
    Új anyagok
    A rádiógomb ellenőrzött eseményének használata a jQueryben
    Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...
    Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
    Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..
    Miért érdemes elkezdeni a kódolást 2023-ban?
    01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..
    🎙 Random Noise #2  – Örökbefogadás és hit
    az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..
    A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
    A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..
    5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
    Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..
    Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
    A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..