Wykonanie Wewnetrzne przez AJAX

Question

Wykonanie Wewnetrzne przez AJAX

Istnieje div o nazwie "Content":

<div id="content"></div>

Powinien być wypełniony danymi z pliku PHP, przez AJAX, w tym znacznikiem <script>. Jednak skrypt wewnątrz tego znacznika nie jest wykonywany.

<div id="content"><!-- After AJAX loads the stuff that goes here -->
   <script type="text/javascript">
     //code
   </script>
   <!-- More stuff that DOES work here -->
</div>

81

javascript html ajax

Author: JCOC611, 2011-01-06

Source

10 answers

Użyłem tego kodu, działa dobrze

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

54

Author: Firas Nizam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-29 11:59:20

Jeśli załadujesz blok skryptu w swoim div przez Ajax w ten sposób:

<div id="content">
    <script type="text/javascript">
    function myFunction() {
      //do something
    }
    myFunction();
    </script>
</div>

... po prostu aktualizuje DOM Twojej strony, mojafunction () niekoniecznie jest wywoływana.

Możesz użyć metody wywołania zwrotnego Ajax, takiej jak ta w metodzie jQuery ajax () , aby zdefiniować, co należy wykonać po zakończeniu żądania.

To, co robisz, różni się od ładowania strony z zawartym w niej JavaScript z get-go (który jest wykonywany).

Przykład jak aby użyć wywołania zwrotnego sukcesu i wywołania zwrotnego błędu po pobraniu zawartości:

  $.ajax({
    type: 'GET',
    url: 'response.php',
    timeout: 2000,
    success: function(data) {
      $("#content").html(data);
      myFunction();
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      alert("error retrieving content");
    }

Innym szybkim i brudnym sposobem jest użycie eval () do wykonania dowolnego kodu skryptu, który wstawiłeś jako tekst DOM, jeśli nie chcesz używać jQuery lub innej biblioteki.

12

Author: Christopher Tokar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-01-06 21:47:19

Oto skrypt, który oceni wszystkie znaczniki skryptu w tekście.

function evalJSFromHtml(html) {
  var newElement = document.createElement('div');
  newElement.innerHTML = html;

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

Po prostu wywołaj tę funkcję po otrzymaniu kodu HTML z serwera. Uwaga: używanie eval może być niebezpieczne.

Demo: http://plnkr.co/edit/LA7OPkRfAtgOhwcAnLrl?p=preview

8

Author: Evgenii,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-03 22:48:09

To 'po prostu działa' dla mnie używając jQuery, pod warunkiem, że nie spróbujesz dołączyć podzbioru zwracanego przez XHR HTML do dokumentu. (Zobacz Ten raport o błędzie pokazujący problem z jQuery.)

Oto przykład pokazujący, że działa:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>test_1.4</title> 
    <script type="text/javascript" charset="utf-8" src="jquery.1.4.2.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
        var snippet = "<div><span id='a'>JS did not run<\/span><script type='text/javascript'>" +
        "$('#a').html('Hooray! JS ran!');" +
        "<\/script><\/div>";
        $(function(){
            $('#replaceable').replaceWith($(snippet));
        });
    </script> 
</head> 
<body> 
    <div id="replaceable">I'm going away.</div> 
</body> 
</html>

Oto odpowiednik powyższego: http://jsfiddle.net/2CTLH/

4

Author: Phrogz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-01-06 21:39:12

Jeśli wstrzykujesz coś, co wymaga znacznika script, możesz uzyskać błąd składni i powiedzieć nielegalny token . Aby tego uniknąć, unikaj ukośników w znacznikach skryptu zamykającego. ie;

var output += '<\/script>';

To samo dotyczy wszystkich znaczników zamykających, takich jak znacznik formularza.

2

Author: TommyRay,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-19 16:54:04

Oto funkcja, której możesz użyć do analizy odpowiedzi AJAX, zwłaszcza jeśli używasz minifiedjs i chcesz, aby wykonała zwrócony Javascript lub po prostu chcesz analizować Skrypty bez dodawania ich do DOM, obsługuje również błędy WYJĄTKÓW. Użyłem tego kodu w bibliotece php4sack i jest on przydatny poza biblioteką.

function parseScript(_source) {
    var source = _source;
    var scripts = new Array();

    // Strip out tags
    while(source.toLowerCase().indexOf("<script") > -1 || source.toLowerCase().indexOf("</script") > -1) {
        var s = source.toLowerCase().indexOf("<script");
        var s_e = source.indexOf(">", s);
        var e = source.toLowerCase().indexOf("</script", s);
        var e_e = source.indexOf(">", e);

        // Add to scripts array
        scripts.push(source.substring(s_e+1, e));
        // Strip from source
        source = source.substring(0, s) + source.substring(e_e+1);
    }

    // Loop through every script collected and eval it
    for(var i=0; i<scripts.length; i++) {
        try {
          if (scripts[i] != '')
          {         
            try  {          //IE
                  execScript(scripts[i]);   
      }
      catch(ex)           //Firefox
      {
        window.eval(scripts[i]);
      }   

            }  
        }
        catch(e) {
            // do what you want here when a script fails
         // window.alert('Script failed to run - '+scripts[i]);
          if (e instanceof SyntaxError) console.log (e.message+' - '+scripts[i]);
                    }
    }
// Return the cleaned source
    return source;
 }

1

Author: Andre Van Zuydam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-15 11:34:40

Miałem podobny post tutaj, addeventlistener load on ajax load WITHOUT jquery

Jak rozwiązałem to było wstawianie wywołań do funkcji w mojej funkcji stateChange. Strona, którą miałem konfigurację, to 3 przyciski, które ładowałyby 3 różne strony do contentArea. Ponieważ musiałem wiedzieć, który przycisk jest wciśnięty, aby załadować stronę 1, 2 lub 3, mogłem łatwo użyć instrukcji if / else, aby określić, która strona jest ładowana, a następnie którą funkcję uruchomić. To, co chciałem zrobić, to rejestruj różne słuchacze przycisków, które działały tylko wtedy, gdy konkretna strona została załadowana z powodu identyfikatorów elementów..

Więc...

If (page1 is being loaded, pageload = 1) uruchom funkcję registerListeners1

To samo dla strony 2 lub 3.

0

Author: Richard Chase,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:51

To działało dla mnie przez wywołanie eval na każdej zawartości skryptu z ajax .zrobione:

$.ajax({}).done(function (data) {      
    $('div#content script').each(function (index, element) { eval(element.innerHTML); 
})

Uwaga: nie zapisałem parametrów do $.ajax który trzeba dostosować według twojego Ajaksu.

0

Author: shivgre,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-15 07:41:02

Kolejną rzeczą do zrobienia jest załadowanie strony skryptem takim jak:

<div id="content" onmouseover='myFunction();$(this).prop( 'onmouseover', null );'>
<script type="text/javascript">
function myFunction() {
  //do something
}
myFunction();
</script>
</div>

Spowoduje to załadowanie strony, a następnie uruchomienie skryptu i usunięcie obsługi zdarzenia po uruchomieniu funkcji. To nie będzie działać natychmiast po załadowaniu ajax, ale jeśli czekasz na użytkownika, aby wprowadzić element div, to będzie działać dobrze.

PS. Wymaga Jquery

-2

Author: Joshua Klein,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-08 23:10:42

score 58 · Accepted Answer

JavaScript wstawiony jako tekst DOM nie zostanie uruchomiony. Możesz jednak użyć dynamiczny wzorzec skryptu, aby osiągnąć swój cel. Podstawową ideą jest przeniesienie skryptu, który chcesz wykonać do zewnętrznego pliku i utworzenie znacznika skryptu, gdy otrzymasz odpowiedź Ajax. Następnie ustawiasz atrybut src twojego znacznika skryptu i voila, ładuje i wykonuje zewnętrzny skrypt.

Ten inny post StackOverflow może być również dla Ciebie pomocny: czy skrypty można wstawiać z innerHTML?.