JQuery AJAX загрузка внешнего JavaScript заставляет браузер перенаправить на новое место

Question

У меня проблемы с загрузкой внешнего javascript с использованием JQuery. Каждый раз, когда я пытаюсь загрузить этот внешний файл, окно браузера становится пустым, а в Firefox оно перенаправляется на что-то вроде:

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

То, что я пытаюсь сделать, это загрузить карту Google Walkscore в один из разделов на странице. Я попытался использовать метод $ .get (), плагин .load (), $ .getScript () и $ .requireScript () jquery, и ничего не работает, за исключением одного случая, когда я ставлю alert () сразу после $ .get () метод. В этом случае браузер нигде не перенаправлен, и карта Walkscore отображается на странице.

Это мой скрипт в разделе head:

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

Сценарий в теле страницы:

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

Пожалуйста, смотрите также все примеры, которые у меня есть (работает только первый):

// 1. $ .get () - рабочий пример, имеет предупреждение сразу после метода $ .get ()

websvit. ком / закладки / walkscore-с-alert.html

// 2. $ .get () - точно так же, как и выше, без предупреждения, не работает

websvit. ком / закладки / walkscore-get.html

// 3. .load () - загрузка html-файла с помощью walkscore js, не работает

websvit. ком / закладки / walkscore-load.html

// 4. $ .getScript () - не работает

websvit. ком / закладки / walkscore-getscript-external.html

// 5. $ .getScript () локально сохраненный walkscore js, не работает

websvit. ком / закладки / walkscore-getscript-local.html

// 6. $ .requireScript () - использование плагина jquery, не работает

websvit. ком / закладки / walkscore-получить plugin.html

Answer 1

У меня есть решение моей проблемы. Я нашел способ избежать использования ajax для загрузки java-скрипта walkscore, но использовать простой iframe . В случае, если у кого-то возникнет аналогичная проблема с картой Walkscore, я отправлю код здесь.

    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

Проблема в том, что при написании сценария WalkScore ваш ajax-вызов должен выполняться синхронно (вместо асинхронного), чтобы он работалЭто причина, по которой наличие alert () заставляет его работать.

После просмотра вашего кода и прохождения скрипта, возвращенного звонком в WalkScore, я нашел способ заставить его работать.Вы можете использовать $ .getScript с обратным вызовом и добавить iframe к contentArea DIV.Для этого скрипт WalkScore использует document.write ().

Скопируйте приведенный ниже скрипт в тег head.Убедитесь, что wsid подходит для вашего домена, в противном случае вы получите пустую страницу.Удалите тег script, который в данный момент находится внутри вашего 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>