load/get Script aus HTML-File

N

Netzwerkidi

Hallo,

weiß jemand, wie man ein Script aus einem HTML-File selektiert und möglichst ohne eval() ausführt?

Ich habe zwei Files:

File 1: http://jsfiddle.net/KReLL/

Code: 
<script id="js001">$('body').append('<p>Script 1</p>');</script>
<script id="js002">$('body').append('<p>Script 2</p>');</script>
<script id="js003">$('body').append('<p>Script 3</p>');</script>

File 2: http://jsfiddle.net/D54uw/

Code: 
$(document).ready(function () {
    $('head').lade und führe script 2 aus ('http://jsfiddle.net/KReLL/ #js002');
});

Thx!
 
Selektieren ist einfach:
Javascript: 
jQuery("script").each(function() { ... });

Ausführen wird schwieriger.

eval ist böse und sollte nicht verwendet werden, ein kleiner Hack-around wäre sowas hier:

Javascript: 
var aJSString = "console.log('hello world')";
var img = document.createElement("img"); 
jQuery(img).attr("onclick", aJSString);
jQuery(img).trigger("click");


Edit: Aber für jede Problemstellung gibt es normalerweise eine Lösung, dass sowas nicht verwendet werden muss :)
 
Zuletzt bearbeitet:
Das Problem ist einfach, dass man bei Blogger (...blogspot.com) keine js- oder json-Files speichern kann, man kann gar keinen Namen selbst vergeben, es werden immer HTML-Files angelegt. D. h. man muss entweder immer den gesamten Code in der Basis vorhalten, würgt damit die Performance ab und schleppt überflüssiges Zeugs mit.

Meine Idee war deshalb, eine separate Seite zu definieren, aus der ich dann das zur Laufzeit rauspicke, was benötigt wird je nach Seite.
 
Irgendwie dachte ich, es nun bei http://plnkr.co/edit/Hj0cyTUV44BPrxiOvPpW?p=preview gefunden zu haben.

Ich habe bei Plunker zum Testen den body und das Script etwas geändert:
HTML: 
  <body>

    
    
    <script>
    
    $('body').prepend('<div id="new_content"></div>');
      
    $(function(){

  $.get('partial.html', function(result){
    $result = $(result);
    
    $result.find('#content').appendTo('#new_content');
    $result.find('#js001').appendTo('#new_content');  // geändert
  }, 'html');

});
    </script>

  </body>


und den File partial.html

HTML: 
  <div><div id="content">
    content
  </div>
    <script id="js001"> // geändert mit id
      alert('x1')
    </script>
    <script>
      alert('x2')
    </script>    
  <div>Some other content</div>
</div>


Ergebnis: Läuft ohne Probleme. Das Script js001 wird aufgerufen und bringt die Meldung.




Das gleiche läuft auch lokal:

HTML: 
<!DOCTYPE HTML>   
<head lang='de'> 
  <meta charset='utf-8'>   
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>       

  <script type="text/javascript">
    
  $(document).ready(function() {
  
  // http://plnkr.co/edit/Hj0cyTUV44BPrxiOvPpW?p=preview
    
  
  $('body').prepend('<div id="new_content"></div>'); // geändert
      
  $(function(){

    //$.get('http://MEINBLOG.blogspot.de/p/javascript.html', function(result){
    $.get('partial.html', function(result){
      $result = $(result);
      //alert(result);
      $result.find('#content').appendTo('#new_content');
      $result.find('#js001').appendTo('#new_content'); // geändert
    }, 'html');

  });


  });
  
  </script>  
     
     
                     
</head>   
<body>         
  
</body>  
</html>


HTML: 
<!DOCTYPE HTML>   
<head lang='de'> 
  <meta charset='utf-8'> 

  <title></title>       

                     
</head>   
<body>  

<div>
  <div id="content">
    content
  </div>
    <script id="js001">
      alert('x1')
    </script>
    <script>
      alert('x2')
    </script>    
  <div>Some other content</div>
</div>        
  
</body>



Wenn ich es dagegen mit Firebug gegen den Blog laufen lassen, wird zwar alles gemacht, aber das Script läuft nicht und die Meldung erscheint also auch nicht.

Jemand eine Idee?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück