İnnerHTML ile komut dosyaları eklenebilir mi?

223

Ben kullanarak bir sayfanın içine bazı komut dosyalarını yüklemeye çalıştı innerHTMLbir üstünde <div>. Komut dosyasının DOM'a yüklendiği anlaşılıyor, ancak asla yürütülmüyor (en azından Firefox ve Chrome'da). Komut dosyalarını eklerken çalıştırmanın bir yolu var innerHTMLmı?

Basit kod:

<!DOCTYPE html>
<html>
  <body onload="document.getElementById('loader').innerHTML = '<script>alert(\'hi\')<\/script>'">
    Shouldn't an alert saying 'hi' appear?
    <div id="loader"></div>
  </body>
</html>

Snippet'i genişlet

— Craig
kaynak

88

DOM metni olarak eklediğiniz herhangi bir komut dosyası kodunu yürütmek için eval () yöntemini kullanmanız gerekir .

MooTools bunu sizin için otomatik olarak yapacak ve eminim jQuery de (sürüme bağlı olarak. JQuery sürüm 1.6+ kullanır eval). Bu, <script>etiketleri ayrıştırma ve içeriğinizden kaçmanın yanı sıra bir sürü diğer "gotchas" ı da zorlaştırır.

Eğer gidiyoruz Genellikle eğer eval()o kendini, oluşturmayı / gibi herhangi bir HTML işaretleme içermeyen komut dosyası kodu göndermek istediğiniz <script>bu olmaz gibi eval()düzgün.

— zombat
kaynak

12

Gerçekten yapmak istediğim, sadece bazı yerel komut dosyalarını değerlendirmek değil, harici bir komut dosyası yüklemek. İnnerHTML ile bir komut dosyası etiketi eklemek bir komut dosyası DOM öğesi oluşturmak ve gövdeye eklemek çok daha kısa ve ben kodumu mümkün olduğunca kısa yapmaya çalışıyorum. Dom script öğeleri oluşturmak ve onları sadece innerHTML gibi bir şey kullanmak yerine dom'e eklemek zorunda mısınız? Bunu bir işlev içinden document.write ile yapmanın bir yolu var mı?

— Craig

5

Zombat'ın önerdiği gibi, harici komut dosyasını yüklemek için bir Javascript çerçevesi kullanın, tekerleği yeniden icat etmeye çalışmayın. JQuery bunu son derece kolaylaştırır, sadece JQuery'yi ekleyin ve $ .getScript (url) deyin. Komut dosyası yüklendikten sonra yürütülecek bir geri arama işlevi de sağlayabilirsiniz.

— Ariel Popovsky

2

Ariel haklı. Kodunuzu kısa tutmaya çalıştığınız için teşekkür ederim ve bir <script>etiket eklemek innerHTMLkısa olabilir, ancak işe yaramaz. Her şey bitene kadar düz metin eval(). Ne yazık ki, eval()HTML etiketlerini ayrıştırmaz, bu nedenle bir sorun zinciri ile sonuçlanırsınız.

— zombat

21

eval () herhangi bir soruna mükemmel bir çözüm değildir.

— buley

2

Eval () 'i kendim denedim. Bu korkunç bir fikir. Her şeyi HER ZAMAN değerlendirmelisiniz . Değişken adı ve değeri beyan etseniz bile, çalışmasını sağlamak için her defasında yeniden bildirmeniz / yeniden değerlendirmeniz () yapmanız gerekir. Hataların kabusu.

— Youstay Igo

88

Sorununuz için çok ilginç bir çözüm: http://24ways.org/2005/have-your-dom-and-script-it-too

Bu yüzden komut dosyası etiketleri yerine bunu kullanın:

<img src="empty.gif" onload="alert('test');this.parentNode.removeChild(this);" />

— user447963
kaynak

12

Bu harika!

— yapılandırma dosyasındaki

Bir ajax isteği sonucu eklendiğinde benim için çalışmıyor: Sözdizimi hatası eksik; senaryo dizisinin başındaki ifadeden önce

— Oliver

& Lt; img src ... satırını sayfa kodunuza nasıl eklersiniz? Document.write () ya da document.body.innerHTML + = yaklaşımını kullanıyor musunuz? Her ikisi de benim için başarısız :(

— Youstay Igo

Bir onloadözelliğin içine çok fazla kod yazmak çok pratik değildir . Ayrıca bu ek bir dosyanın mevcut olmasını ve yüklenmesini gerektirir. momo'nun çözümü daha az uzlaşmadır.

— fregante

15

Base64, tetikleme görüntünüzü şu şekilde kodlayabilirsiniz <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">(bu bir ağ isteği yapmaz) Aslında ... bir görüntüye ihtiyacınız yoktur, var olmayan bir görüntüye referansta bulunur ve onloadkullanmak yerine onerror(ancak bu bir ağ isteği yapar)

— Danny '365CSI' Engelman

83

Tüm komut dosyalarını yinelenen biçimde yürütülebilir komutlarla değiştiren bir yöntem şunlardır:

function nodeScriptReplace(node) {
        if ( nodeScriptIs(node) === true ) {
                node.parentNode.replaceChild( nodeScriptClone(node) , node );
        }
        else {
                var i        = 0;
                var children = node.childNodes;
                while ( i < children.length ) {
                        nodeScriptReplace( children[i++] );
                }
        }

        return node;
}
function nodeScriptIs(node) {
        return node.tagName === 'SCRIPT';
}
function nodeScriptClone(node){
        var script  = document.createElement("script");
        script.text = node.innerHTML;
        for( var i = node.attributes.length-1; i >= 0; i-- ) {
                script.setAttribute( node.attributes[i].name, node.attributes[i].value );
        }
        return script;
}

Örnek çağrı:

nodeScriptReplace(document.getElementsByTagName("body")[0]);

— mmm
kaynak

9

Cevabınızın tamamen aşağı olduğuna şaşırıyorum. IMHO, bu en iyi çözümdür, bu yöntem belirli URL'lere veya içeriğe sahip komut dosyalarını kısıtlamanıza bile izin verir.

— davidmh

1

@ inf3rno yapar mı yapmaz mı? Eskiden çalışırdı, hiç kimse farklı bir şey iddia etti mi?

— mmm

[0] 'ın amacı nedir? nodeScriptReplace (document.getElementById (). html) kullanabilirsiniz;

— Bao Thai

@BaoThai Evet. Yapabilirsin.

— mmm

IWebBrowser2'de yardımcı görünmüyor; Komut dosyası etiketlerinin createElement ile yeniden oluşturulduğunu onaylayabilirim, ancak bunları hala InvokeScript () aracılığıyla çağıramıyorum.

— Dave

46

Komut dosyası oluşturabilir ve ardından içeriği enjekte edebilirsiniz.

var g = document.createElement('script');
var s = document.getElementsByTagName('script')[0];
g.text = "alert(\"hi\");"
s.parentNode.insertBefore(g, s);

Bu tüm tarayıcılarda çalışır :)

— Pablo Moretti
kaynak

1

Belgede başka komut dosyası öğesi yoksa. document.documentElementBunun yerine kullanın .

— Eli Gray

4

Başka bir komut dosyasından komut dosyası yazdığınız için gerekli değildir. <script> var g = document.createElement('script'); var s = document.getElementsByTagName('script')[0]; //reference this script g.text = "alert(\"hi\");" s.parentNode.insertBefore(g, s); </script>

— Pablo Moretti

3

Kim başka bir senaryoda olduğunu söylüyor? JavaScript'i <script>öğeler olmadan çalıştırabilirsiniz . Örneğin <img onerror="..." src="#">ve <body onload="...">. Teknik olmak istiyorsanız, HTML / SVG olmayan belgelerde de açık ad alanı nedeniyle çalışmaz.

— Eli Gray

2

Facebook, Pablo'nun cevabını SDK'larında kullanıyor. developers.facebook.com/docs/javascript/quickstart/v2.2#loading

— geoyws

30

Bu kodu kullandım, iyi çalışıyor

var arr = MyDiv.getElementsByTagName('script')
for (var n = 0; n < arr.length; n++)
    eval(arr[n].innerHTML)//run script inside div

— Firas Nizam
kaynak

1

Teşekkürler. TinyBox2 Jquery eklentisi kullanılarak oluşturulan kalıcı bir açılır pencereye Disqus Universal kodu ekleme sorunumu düzeltti.

— gsinha

3

Ne yazık ki, komut dosyası daha sonra çağrılacak işlevler içerdiğinde bu çözüm çalışmaz.

— Jose Gómez

7

İnnerHTML ile bu sorunu vardı, benim Reactjs uygulamasının "head" etiketine bir Hotjar komut dosyası eklemek zorunda kaldı ve hemen ekledikten sonra yürütmek zorunda kalacak.

"Head" etiketine dinamik Node içe aktarma için iyi çözümlerden biri React-helment modülüdür.

Ayrıca, önerilen sorun için yararlı bir çözüm var:

İnnerHTML'de komut dosyası etiketi yok!

HTML5'in, innerHTML özelliği kullanılarak komut dosyası etiketlerinin dinamik olarak eklenmesine izin vermediği ortaya çıkıyor. Bu yüzden aşağıdakiler yürütülmeyecek ve Hello World!

element.innerHTML = "<script>alert('Hello World!')</script>";

Bu HTML5 spesifikasyonunda belgelenmiştir:

Not: innerHTML kullanılarak eklenen komut dosyası öğeleri eklendiklerinde çalışmazlar.

Ancak unutmayın, bu innerHTML'nin siteler arası komut dosyalarından güvenli olduğu anlamına gelmez. MDN'nin innerHTML sayfasında gösterilen etiketleri kullanmadan JavaScript'i innerHTML aracılığıyla yürütmek mümkündür .

Çözüm: Dinamik olarak komut dosyası ekleme

Bir komut dosyası etiketini dinamik olarak eklemek için yeni bir komut dosyası öğesi oluşturmanız ve hedef öğeye eklemeniz gerekir.

Harici komut dosyaları için bunu yapabilirsiniz:

var newScript = document.createElement("script");
newScript.src = "http://www.example.com/my-script.js";
target.appendChild(newScript);

Ve satır içi komut dosyaları:

var newScript = document.createElement("script");
var inlineScript = document.createTextNode("alert('Hello World!');");
newScript.appendChild(inlineScript); 
target.appendChild(newScript);

— p.daniel
kaynak

5

Hala bunu yapmaya çalışan herkes için, hayır, kullanarak bir komut dosyası enjekte edemezsiniz innerHTML, ancak bir Blobve kullanarak bir komut dosyası etiketine bir dize yüklemek mümkündür URL.createObjectURL.

Bir dize komut dosyası olarak çalıştırmak ve bir söz ile döndürülen komut dosyası 'ihracat' elde etmenizi sağlayan bir örnek oluşturdum:

function loadScript(scriptContent, moduleId) {
    // create the script tag
    var scriptElement = document.createElement('SCRIPT');

    // create a promise which will resolve to the script's 'exports'
    // (i.e., the value returned by the script)
    var promise = new Promise(function(resolve) {
        scriptElement.onload = function() {
            var exports = window["__loadScript_exports_" + moduleId];
            delete window["__loadScript_exports_" + moduleId];
            resolve(exports);
        }
    });

    // wrap the script contents to expose exports through a special property
    // the promise will access the exports this way
    var wrappedScriptContent =
        "(function() { window['__loadScript_exports_" + moduleId + "'] = " + 
        scriptContent + "})()";

    // create a blob from the wrapped script content
    var scriptBlob = new Blob([wrappedScriptContent], {type: 'text/javascript'});

    // set the id attribute
    scriptElement.id = "__loadScript_module_" + moduleId;

    // set the src attribute to the blob's object url 
    // (this is the part that makes it work)
    scriptElement.src = URL.createObjectURL(scriptBlob);

    // append the script element
    document.body.appendChild(scriptElement);

    // return the promise, which will resolve to the script's exports
    return promise;
}

...

function doTheThing() {
    // no evals
    loadScript('5 + 5').then(function(exports) {
         // should log 10
        console.log(exports)
    });
}

Bunu gerçek uygulamamdan sadeleştirdim, bu yüzden içinde herhangi bir hata olmadığını vaat etmiyorum. Ancak prensip işe yarıyor.

Komut dosyası çalıştıktan sonra herhangi bir değer elde etmeyi umursamıyorsanız, daha da kolaydır; Promiseve onloadbitleri dışarıda bırak . Senaryoyu sarmanıza veya global window.__load_script_exports_mülkü oluşturmanıza bile gerek yoktur .

— JayArby
kaynak

1

Ben sadece denedim ve krom 57. çalışır Bir komut dosyası etiketi üzerinde innerHTML metni yürütür.

— iPherian

Bu ilginç, daha önce işe yaramadı. Bu davranışın çapraz tarayıcı mı yoksa yalnızca krom 57'de mi olduğunu merak ediyorum.

— JayArby

4

Reklam sunucumuzda kullandığım bir öğenin innerHTML'sini ayarlamak için yinelenen bir işlev şunlardır:

// o: container to set the innerHTML
// html: html text to set.
// clear: if true, the container is cleared first (children removed)
function setHTML(o, html, clear) {
    if (clear) o.innerHTML = "";

    // Generate a parseable object with the html:
    var dv = document.createElement("div");
    dv.innerHTML = html;

    // Handle edge case where innerHTML contains no tags, just text:
    if (dv.children.length===0){ o.innerHTML = html; return; }

    for (var i = 0; i < dv.children.length; i++) {
        var c = dv.children[i];

        // n: new node with the same type as c
        var n = document.createElement(c.nodeName);

        // copy all attributes from c to n
        for (var j = 0; j < c.attributes.length; j++)
            n.setAttribute(c.attributes[j].nodeName, c.attributes[j].nodeValue);

        // If current node is a leaf, just copy the appropriate property (text or innerHTML)
        if (c.children.length == 0)
        {
            switch (c.nodeName)
            {
                case "SCRIPT":
                    if (c.text) n.text = c.text;
                    break;
                default:
                    if (c.innerHTML) n.innerHTML = c.innerHTML;
                    break;
            }
        }
        // If current node has sub nodes, call itself recursively:
        else setHTML(n, c.innerHTML, false);
        o.appendChild(n);
    }
}

Demoyu burada görebilirsiniz .

— Adnan Korkmaz
kaynak

3

Bunu şu şekilde yapabilirsiniz:

var mydiv = document.getElementById("mydiv");
var content = "<script>alert(\"hi\");<\/script>";

mydiv.innerHTML = content;
var scripts = mydiv.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
    eval(scripts[i].innerText);
}

— Jake
kaynak

3

Burada eval, komut dosyaları , bağlantılı komut dosyaları ve modüllerle çalışmayan ve bunlarla çalışan bir çözüm .

İşlev 3 parametre kabul eder:

html : Eklemek için html kodunu içeren dize
dest : hedef öğeye başvuru
append : hedef öğenin sonuna eklenmesini etkinleştirmek için boole bayrağı html

function insertHTML(html, dest, append=false){
    // if no append is requested, clear the target element
    if(!append) dest.innerHTML = '';
    // create a temporary container and insert provided HTML code
    let container = document.createElement('div');
    container.innerHTML = html;
    // cache a reference to all the scripts in the container
    let scripts = container.querySelectorAll('script');
    // get all child elements and clone them in the target element
    let nodes = container.childNodes;
    for( let i=0; i< nodes.length; i++) dest.appendChild( nodes[i].cloneNode(true) );
    // force the found scripts to execute...
    for( let i=0; i< scripts.length; i++){
        let script = document.createElement('script');
        script.type = scripts[i].type || 'text/javascript';
        if( scripts[i].hasAttribute('src') ) script.src = scripts[i].src;
        script.innerHTML = scripts[i].innerHTML;
        document.head.appendChild(script);
        document.head.removeChild(script);
    }
    // done!
    return true;
}

— colxi
kaynak

Yani ... Kod içeriği ile bir komut dosyası etiketi eklemek bir eval, değil mi?

— Kevin B

@KevinB Kötü şöhretli farklılıklar var ... deneyin eval('console.log(this)')ve en belirgin olanı göreceksiniz

— colxi

bağlam farklı ve? hala sadece bir eval.

— Kevin B

@KevinB Hayır bu bir eval değil. Bunu deneyin eval('let b=100').. ve sonra beval dışından erişmeye çalışın .... onunla iyi şanslar, ihtiyacınız olacak

— colxi

Benim için çalışıyor. Şerefe

— Bezzzo

1

Krasimir Tsonev'in tüm sorunların üstesinden gelen mükemmel bir çözümü var. Metodunun eval kullanımına ihtiyacı yoktur, dolayısıyla performans veya güvenlik problemleri yoktur. Bu html içeren js ile innerHTML dizesini ayarlamak ve hemen bir DOM öğesine çevirmek sağlarken aynı zamanda kod boyunca mevcut js parçaları yürütür. kısa, basit ve tam istediğiniz gibi çalışır.

Çözümünün tadını çıkarın:

http://krasimirtsonev.com/blog/article/Convert-HTML-string-to-DOM-element

Önemli notlar:

Hedef öğeyi div etiketi ile sarmanız gerekir
Src dizesini div etiketi ile sarmanız gerekir.
Src dizesini doğrudan yazarsanız ve js parçaları içerirse, bu bir dize olduğundan lütfen kapanış komut dosyası etiketlerini doğru bir şekilde (\ before / ile) yazmaya dikkat edin.

— user3198805
kaynak

1

Yerine $(parent).html(code)kullanın parent.innerHTML = code.

Aşağıdakiler ayrıca, kullanılan document.writekomut dosyalarını ve srcöznitelik yoluyla yüklenen komut dosyalarını da düzeltir . Maalesef bu bile Google AdSense komut dosyalarıyla çalışmıyor.

var oldDocumentWrite = document.write;
var oldDocumentWriteln = document.writeln;
try {
    document.write = function(code) {
        $(parent).append(code);
    }
    document.writeln = function(code) {
        document.write(code + "<br/>");
    }
    $(parent).html(html); 
} finally {
    $(window).load(function() {
        document.write = oldDocumentWrite
        document.writeln = oldDocumentWriteln
    })
}

Kaynak

— iirekm
kaynak

1

burada biraz geç, ancak bu yöntemi kullanan herkes, JQuery'de komut dosyalarınızı <script src = "url> </script> yerine $ .loadScript (url) kullanarak yüklemeniz gerektiğini fark eder. kullanımdan kaldırıldı Senkronize XMLHttpRequest hatası tarayıcılarda

— Stavm

1

Template ve document.importNode kullanmayı deneyin. İşte bir örnek:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<h1 id="hello_world">Sample</h1>
<script type="text/javascript">
 var div = document.createElement("div");
  var t = document.createElement('template');
  t.innerHTML =  "Check Console tab for javascript output: Hello world!!!<br/><script type='text/javascript' >console.log('Hello world!!!');<\/script>";
  
  for (var i=0; i < t.content.childNodes.length; i++){
    var node = document.importNode(t.content.childNodes[i], true);
    div.appendChild(node);
  }
 document.body.appendChild(div);
</script>
 
</body>
</html>

Snippet'i genişlet

— Gri
kaynak

1

Bu Microsoft Edge, başka bir geçici çözüm ile çalışmaz mı?

— Soul

1

Ayrıca <script>bu şekilde sarın ve yürütülür:

<your target node>.innerHTML = '<iframe srcdoc="<script>alert(top.document.title);</script>"></iframe>';

Lütfen dikkat: İçindeki kapsam srcdociframe'i ifade eder, bu nedenle topüst belgeye erişmek için yukarıdaki örnekte olduğu gibi kullanmanız gerekir .

— Naden
kaynak

1

Dinamik olarak bir komut dosyası etiketi eklemek istediğimde bunu yapıyorum!

  const html =
    `<script>
        alert('👋 there ! Wanna grab a 🍺'); 
    </script>`;

  const scriptEl = document.createRange().createContextualFragment(html);
  parent.append(scriptEl);

NOT: ES6 kullanılır

DÜZENLEME 1: Sizin için açıklama çocuklar - Bir sürü yanıtın kullanıldığını gördüm appendChildve tam olarak aşağıdaki gibi çalıştığını bildirmek istedimappend

— Tilak Maddy
kaynak

0

Evet yapabilirsiniz, ancak bunu DOM dışında yapmanız gerekir ve siparişin doğru olması gerekir.

var scr = '<scr'+'ipt>alert("foo")</scr'+'ipt>';
window.onload = function(){
    var n = document.createElement("div");
    n.innerHTML = scr;
    document.body.appendChild(n);
}

... 'foo'yu uyaracak. Bu işe yaramaz:

document.getElementById("myDiv").innerHTML = scr;

Ve bu bile işe yaramaz, çünkü önce düğüm eklenir:

var scr = '<scr'+'ipt>alert("foo")</scr'+'ipt>';
window.onload = function(){
    var n = document.createElement("div");
    document.body.appendChild(n);
    n.innerHTML = scr;  
}

— mwilcox
kaynak

16

Değeri için: bu mevcut tarayıcılarda işe yaramaz gibi görünüyor.

— Wichert Akkerman

0

Bu sorunun çözümü, düğümleri algılamak için Mutasyon Gözlemcisi ayarlamak <script></script>ve daha sonra <script></script>aynı src ile yeni bir düğüm ile değiştirmektir . Örneğin:

let parentNode = /* node to observe */ void 0
let observer = new MutationObserver(mutations=>{
    mutations.map(mutation=>{
        Array.from(mutation.addedNodes).map(node=>{
            if ( node.parentNode == parentNode ) {
                let scripts = node.getElementsByTagName('script')
                Array.from(scripts).map(script=>{
                    let src = script.src
                    script = document.createElement('script')
                    script.src = src
                    return script
                })
            }
        })
    })
})
observer.observe(document.body, {childList: true, subtree: true});

— gabriel garcia
kaynak

1

Nedenini söylemeden beni aşağıladığın için teşekkürler. Hepinizi seviyorum.

— gabriel garcia

0

Gabriel Garcia'nın MutationObservers'dan bahsetmesi doğru yolda, ama benim için pek işe yaramadı. Bunun bir tarayıcı tuhaflığı mı yoksa sonumdaki bir hatadan mı kaynaklandığından emin değilim, ancak benim için çalışacak olan sürüm aşağıdaki gibiydi:

document.addEventListener("DOMContentLoaded", function(event) {
    var observer = new MutationObserver(mutations=>{
        mutations.map(mutation=>{
            Array.from(mutation.addedNodes).map(node=>{
                if (node.tagName === "SCRIPT") {
                    var s = document.createElement("script");
                    s.text=node.text;
                    if (typeof(node.parentElement.added) === 'undefined')
                        node.parentElement.added = [];
                    node.parentElement.added[node.parentElement.added.length] = s;
                    node.parentElement.removeChild(node);
                    document.head.appendChild(s);
                }
            })
        })
    })
    observer.observe(document.getElementById("element_to_watch"), {childList: true, subtree: true,attributes: false});
};

Tabii ki, değiştirilen element_to_watchöğenin adı ile değiştirmelisiniz.

node.parentElement.added, eklenen komut dosyası etiketlerini depolamak için kullanılır document.head. Harici sayfayı yüklemek için kullanılan işlevde, artık alakalı olmayan komut dosyası etiketlerini kaldırmak için aşağıdakine benzer bir şey kullanabilirsiniz:

function freeScripts(node){
    if (node === null)
        return;
    if (typeof(node.added) === 'object') {
        for (var script in node.added) {
            document.head.removeChild(node.added[script]);
        }
        node.added = {};
    }
    for (var child in node.children) {
        freeScripts(node.children[child]);
    }
}

Ve bir yükleme fonksiyonunun başlangıcına bir örnek:

function load(url, id, replace) {
    if (document.getElementById(id) === null) {
        console.error("Element of ID "+id + " does not exist!");
        return;
    }
    freeScripts(document.getElementById(id));
    var xhttp = new XMLHttpRequest();
    // proceed to load in the page and modify innerHTML
}

— pixelherodev
kaynak

MutationObserverBelgeye her öğe eklendiğinde yeni bir öğe eklediğinizi fark ediyorsunuz , değil mi? Btw, merak ediyorum neden kodumun işlevsel olmadığını söylüyorsun.

— gabriel garcia

@gabrielgarcia Kodunuzun işlevsel olmadığını söyledim çünkü denedim ve işe yaramadı. Şimdi baktığımda, sen değil benim üzerimde tamamen mümkün ve ben bunu ifade ettiğim için özür dilerim. Şimdi düzeltiyorum.

— pixelherodev

re: belgeye her öğe eklendiğinde bir MutationObserver eklemek, neden bahsediyorsun? DOMContentLoaded ve burada MDN'den alıntı yapıyorum, "ilk HTML belgesi tamamen yüklenip ayrıştırıldığında, stil sayfaları, resimler ve alt çerçevelerin yüklenmesini bitirmeden tetiklenir." Bu bir kez ve sadece bir kez. Ayrıca, bu komut dosyası sitemde sorunsuz çalışıyor ve hata ayıklama sadece bir kez olduğunu gösteriyor, bu yüzden bir kez pratikte ve teoride.

— pixelherodev

1

haklısın ... Yanlışlıkla özledim. Özür dilerim de.

— gabriel garcia

@gabrielgarcia Sorun değil :)

— pixelherodev

0

Benim için en iyi yol, innerHtml aracılığıyla yeni HTML içeriğini eklemek ve sonra kullanmaktır

setTimeout(() => {
        var script_el = document.createElement("script")
        script_el.src = 'script-to-add.js'
        document.body.appendChild(script_el)
    }, 500)

SetTimeout gerekli değildir, ancak daha iyi çalışır. Bu benim için çalıştı.

— Luis Tiago Flores Cristóvão
kaynak

-1

İnnerHTML'den (Java Script) etiketini yürütün

Komut dosyası öğenizi class = "javascript" sınıf özniteliğine sahip div ile değiştirin ve </div>

Yürütmek istediğiniz içeriği değiştirmeyin (daha önce komut dosyası etiketinde ve şimdi div etiketinde)

Sayfanıza bir stil ekleyin ...

<style type="text/css"> .javascript { display: none; } </style>

Şimdi eval jquery kullanarak çalıştırın (Jquery js zaten dahil edilmelidir)

   $('.javascript').each(function() {
      eval($(this).text());

    });`

Burada daha fazla bilgiyi blogumda bulabilirsiniz.

— Bilgi Sunumu
kaynak