JQuery AJAX Laden von externem JavaScript bewirkt, dass Browser auf neuen Standort umleiten

Question

Ich habe Probleme mit dem Laden von externem JavaScript mit JQuery. Jedes Mal, wenn ich versuche, diese externe Datei zu laden, wird Browserfenster leer und in Firefox leitet es zu so etwas wie:

Wyciwyg: // 40/http://mydomain.com/myfile.html

Was ich versuche, zu tun ist, Walkscore zu laden Google Karte in eines der Divs auf der Seite. Ich habe versucht, mit $ .get() -Methode, .load(), $ .getScript() und $ .requireScript() jquery-Plugin, und nichts funktioniert außer einem Fall, wenn ich alert() direkt nach dem $ .get() Methode. In diesem Fall wird der Browser nirgendwo umgeleitet und die Karte wird auf der Seite angezeigt.

Das ist mein Skript in Kopfteil:

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 

    function loadWalkScore() { $.get("http://www.walkscore.com/tile/show-tile.php?wsid=87439b0626c9eaeacfd6d8d5598afc13",null,null,"script"); } </script> 

Script im Körper der Seite:

<div id="contentArea" style="margin: 20px 0px 10px 10px; border: 1px solid #CCC;"> 

<script type="text/javascript"> 
    var ws_lat = "40.710318"; 
    var ws_lon = "-74.016553"; 
    var ws_width = "630"; 
    loadWalkScore(); 
</script> 

</div> 

Bitte beachten Sie auch alle Beispiele sehen, ich habe (nur erster funktioniert):

// 1. $ .get() - wor König Beispiel, hat Alarm direkt nach der $ .get() Methode

websvit. com/tabs/Walkscore-mit-alert.html

// 2. $ .get() - genau das gleiche wie oben, ohne Benachrichtigung, funktioniert nicht

websvit. com/tabs/Walkscore-get.html

// 3. .load() - Laden von HTML-Datei mit Walkscore js, funktioniert nicht

websvit. com/tabs/Walkscore-load.html

// 4. $ .getScript() - funktioniert nicht

websvit. com/tabs/Walkscore-getScript-external.html

// 5. $ .getScript() lokal gespeichert Walkscore js, funktioniert nicht

websvit. com/tabs/Walkscore-getScript-local.html

// 6. $ .requireScript() - mit jQuery-Plugin, funktioniert nicht

websvit. com/tabs/walkscore-get-plugin.html

Answer 1

Ich habe eine Lösung für mein Problem. Ich habe einen Weg gefunden zu vermeiden, Ajax zu verwenden, um JavaScript zu laden, aber einfach iframe zu verwenden. Falls jemand ein ähnliches Problem mit der Karte von Google Maps hat, poste ich hier Code.

var ws_lat = "40.710318"; 
    var ws_lon = "-74.016553"; 
    var ws_width = "630"; 
    var ws_height = "300"; 
    var ws_iframe_css_final = "border: 0"; 

    var ws_params = "wsid=87439b0626c9eaeacfd6d8d5598afc13"; 
    ws_params += "&lat=" + ws_lat + "&lng=" + ws_lon; 

    $("#walkscore_map").html('<iframe src="http://www.walkscore.com/serve-tile.php?' + ws_params + '" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" frameborder="0" scrolling="no" width="' + ws_width + 'px" height="' + ws_height + 'px" style="' + ws_iframe_css_final + '"></iframe>'); 

Answer 2

Das Problem ist, dass sie das WalkScore-Skript geschrieben wird, müsste Ihr Ajax-Aufruf synchron (anstelle von async) ausgeführt werden, damit es funktioniert. Dies ist der Grund, warum eine Warnung() es funktioniert.

Nachdem ich meinen Code durchgesehen und das Skript durchlaufen habe, das durch den Aufruf von WalkScore zurückgegeben wurde, habe ich den Weg gefunden, damit es funktioniert. Sie können $ .getScript mit einem Callback verwenden und den iframe an contentArea DIV anhängen. Das WalkScore-Skript verwendet hierzu document.write().

Kopieren Sie das folgende Skript in Ihr head-Tag. Stellen Sie sicher, dass die WSID für Ihre Domain korrekt ist, andernfalls erhalten Sie eine leere Seite. Entferne das Script-Tag, das sich momentan in deinem DIV befindet.

<script type="text/javascript"> 
    var ws_lat = "40.710318"; 
    var ws_lon = "-74.016553"; 
    var ws_width = "630"; 
    $(function(){ 
     $.getScript("http://www.walkscore.com/tile/show-tile.php?wsid=87439b0626c9eaeacfd6d8d5598afc13", function(){    
      $('<iframe src="http://www.walkscore.com/serve-tile.php?' + ws_params 
            + '" marginwidth="0" marginheight="0" vspace="0" hspace="0"' 
            + ' allowtransparency="true" frameborder="0" scrolling="no" width="' 
            + ws_width + 'px" height="' + ws_height + 'px" style="' + ws_iframe_css_final + '"></iframe>') 
            .appendTo("#contentArea"); 
     }); 
    }); 
</script>