2016-06-03 9 views
0

Ich versuche, zwei Skripts, die funktionell zurückgestellt wurden wegen ihrer type Attribute sind nicht Standard, d. H. text/javascript/defer. Dadurch ignoriert der Parser sie, weshalb ich sie mit JavaScript neu laden möchte.Firefox nicht ausgeführt JavaScript-Dateien, die dynamisch geladen wurden

Mein HTML ist wie folgt:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title>No Title</title> 
<meta name="keywords" content=""> 
<meta name="description" content=""> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<script type="text/javascript/defer" src="assets/js/test3.js"></script> 
<script type="text/javascript/defer" src="assets/js/test4.js"></script> 

<script type="text/javascript" src="assets/js/jquery.js"></script> 
<script> 

    $(document).ready(function(){ 

     var defer_js_collection_obj = $("[type='text/javascript/defer']"), 
      el_head_rq_obj = $('head'), 
      el_head_obj = el_head_rq_obj[0] 
     ; 

     if(defer_js_collection_obj.length > 0) 
     { 
      //Reload JavaScript 
      defer_js_collection_obj.each(function() { 

       var file_src_outer_html_str = this.outerHTML; 
       var file_src_res_arr = file_src_outer_html_str.match("src *\= *[\"\']{1}(.*?)[\"\']{1}"); 
       var file_src_str = file_src_res_arr[1]; 

       var fileref = document.createElement('script'); 
       fileref.setAttribute("type", "text/javascript"); 
       fileref.setAttribute("src", file_src_str); 
       document.getElementsByTagName("head")[0].appendChild(fileref); 
      }); 

      //Unload JavaScript with defer tag 
      for(var j = defer_js_collection_obj.length-1; j >= 0; j--) 
      { 
       defer_js_collection_obj[j].parentNode.removeChild(defer_js_collection_obj[j]); 
      } 
     } 

    }); 

</script> 
</head> 
<body> 
    <div>Load Deferred JavaScript</div> 
</body> 
</html> 

jquery.js ist Version 1.11.2. test3.js und test4.js verweisen auf die JavaScript-Dateien, die ich laden möchte, und sie enthalten console.log('test3.js is loaded'); bzw. console.log('test4.js is loaded');.

Das Problem, das ich habe, ist, dass dieses Skript praktisch überall anders außer auf Firefox funktioniert. Ich bin auf einem Mac OS X 10.10.5 mit Firefox 46.0.1, und ich sehe nicht die console.log Nachricht, wenn ich das Skript laden.

Wie kann ich das beheben?

+0

'text/javascript/defer' ist ein ungültiger * Typ *. Um * JS * zu verzögern, müssen Sie das * defer * -Attribut auf eine andere Weise verwenden: '' Hacking/Ändern der nativen Funktionalität wird Ihren Code schwer zu pflegen. In HTML5 können Sie den Skripttyp trotzdem sicher weglassen, so dass '' gut funktionieren würde, da 'text/javascript' der Standardwert ist. – Marcus

+0

Ja, ich bin damit vertraut, aber ich bevorzuge es auf diese Weise, weil die Browser-Unterstützung besser ist. Es funktioniert auf allen Browsern, in denen ich es getestet habe, aber nicht auf Firefox, also versuche ich herauszufinden, warum. –

+0

Haben Sie daran gedacht, dass Firefox einfach nicht den missgebildeten 'Typ' von' text/javascript/defer' mag? Ich habe gerade einen Schnelltest mit 'type =" text/javascript/defer "' für eine einfache JS-Datei durchgeführt, und es funktioniert nicht in FF, aber es funktioniert in Chrome. Es sieht so aus, als ob FF es einfach nicht mag .. noch sollte es. – Marcus

Antwort

1

Es könnte ein Mime-Typ Problem sein. Sehen Sie zufällig eine Nachricht in der Konsole, die "nicht wohlgeformt" anzeigt? In jedem Fall schien dies für mich zu funktionieren und ich stimme zu, dass Ihr Code in FF nicht funktionierte, als ich es zum ersten Mal ausprobierte.

$(document).ready(function(){ 
     console.log("main"); 

     var $body = $($("body")[0]); 
     var $scripts = $("[type='text/javascript/defer']"); 

     $scripts.each(function(){ 
      var scriptTag = document.createElement("script"); 
      scriptTag.setAttribute("type", "text/javascript"); 
      scriptTag.setAttribute("src", $(this).attr("src")); 
      $body.append(scriptTag); 
     }); 
    }); 
+0

Danke dafür. Ich sehe nichts in der Konsole, das "nicht wohlgeformt" sagt. Ich habe das Skript aktualisiert und es scheint jetzt zu funktionieren, aber ich bin mir nicht sicher warum. Ich muss vielleicht einen Firefox-Filter einführen, um das Skript auszuführen, wenn der Browser Firefox ist. –

+0

Ich bekomme diese Warnung auch in der Konsole: 'Synchrone XMLHttpRequest auf dem Hauptthread ist wegen seiner nachteiligen Auswirkungen auf die Erfahrung des Endbenutzers veraltet. Für weitere Hilfe http: // xhr.spec.whatwg.org/' –

1

Versuchen Sie, Ihre Skript am Ende des Körper, so stattdessen tun anhängen:

document.getElementsByTagName("body")[0].appendChild(fileref); 
+0

Danke. Versuchte das, aber es hat nicht funktioniert. Ich sehe die Skripte vor dem schließenden Body-Tag, aber keine 'console.log'-Nachricht. –

+0

Verwenden Sie Firefox Inspectors, um zu sehen, welche Auswirkungen Ihr Code auf die Seite hat! –

+0

Wie ich oben erwähnt habe, ist der Code eine einfache 'console.log' Nachricht, sonst nichts. –

Verwandte Themen