JQuery AJAX charge de JavaScript externe redirige le navigateur vers un nouvel emplacement

Question

J'ai des problèmes avec le chargement de javascript externe en utilisant JQuery. Chaque fois que je tente de charger ce fichier externe, la fenêtre du navigateur est vide et dans Firefox il redirige quelque chose comme:

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

Ce que je suis en train de faire, est de charger walkscore google map dans l'un des div sur la page. J'ai essayé d'utiliser la méthode $ .get(), .load(), $ .getScript() et $ .requireScript() jquery plugin, et rien ne fonctionne SAUF un cas, quand je mets alert() juste après le $ .get() méthode. Dans ce cas, le navigateur n'est redirigé nulle part et la carte de promenade s'affiche sur la page.

Ceci est mon script dans la section de tête:

<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 dans le corps de la page:

<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> 

S'il vous plaît voir aussi tous les exemples que j'ai (seulement premier travaux):

// 1. $ .get() - wor exemple roi, a alerte juste après la méthode $ .get()

websvit. com/onglets/walkscore avec-alert.html

// 2. .get $() - exactement la même chose que ci-dessus sans alerte, le travail ne marche pas

websvit. com/onglets/walkscore-get.html

// 3. .load() - chargement du fichier html avec js walkscore, le travail ne marche pas

de websvit. com/onglets/walkscore-load.html

// 4. .getScript $() - doesnt travail

websvit. com/onglets/walkscore-getScript-external.html

// 5. $ .getScript() js de walkscore enregistrés localement, le travail ne marche pas

websvit. com/onglets/walkscore-getScript-local.html

// 6. .requireScript $() - en utilisant le plugin jquery, le travail ne marche pas

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

Answer 1

J'ai une solution à mon problème. J'ai trouvé un moyen d'éviter d'utiliser ajax pour charger le javascript de walkcore mais pour utiliser iframe. Dans le cas où quelqu'un aura un problème similaire avec la carte de promenade, je poste le code ici.

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

Le problème est que de la façon dont le script WalkScore est écrit, votre appel ajax devrait être exécuté de manière synchrone (au lieu de async) pour que cela fonctionne. C'est la raison pour laquelle avoir une alerte() le fait fonctionner. Après avoir parcouru votre code et parcouru le script renvoyé par l'appel à WalkScore, j'ai trouvé le moyen de le faire fonctionner. Vous pouvez utiliser $ .getScript avec un rappel et ajouter l'iframe à contentArea DIV. Le script WalkScore utilise document.write() pour cela.

Copiez le script ci-dessous dans votre tag principal. Assurez-vous que le wsid est correct pour votre domaine, sinon vous obtiendrez une page vierge. Supprimez la balise de script qui se trouve actuellement dans votre DIV.

<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>