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

Question

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

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

Я пытаюсь загрузить карту Google Walkscore в один из элементов div на странице.Я пробовал использовать метод $.get(), .load(), $.getScript() и плагин jquery $.requireScript(), и ничего не работает, ЗА ИСКЛЮЧЕНИЕМ одного случая, когда я помещаю alert() сразу после $.get. () метод.В этом случае браузер никуда не перенаправляется, и на странице отображается карта ходьбы.

Это мой скрипт в разделе 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().

вебсвит.com/tabs/walkscore-with-alert.html

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

вебсвит.com/tabs/walkscore-get.html

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

вебсвит.com/tabs/walkscore-load.html

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

вебсвит.com/tabs/walkscore-getscript-external.html

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

вебсвит.com/tabs/walkscore-getscript-local.html

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

вебсвит.com/tabs/walkscore-get-plugin.html

Answer 1

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