外部 JavaScript 的 JQuery AJAX 加载导致浏览器重定向到新位置

Question

我在使用 JQuery 加载外部 JavaScript 时遇到问题。每次我尝试加载此外部文件时，浏览器窗口都会变为空白，并且在 Firefox 中它会重定向到以下内容：

所见即所得：//40/http://mydomain.com/myfile.html

我想要做的是将 walkscore 谷歌地图加载到页面上的一个 div 中。我试过使用 $.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() 方法之后有警报

网站。 com/tabs/walkscore-with-alert.html

// 2. $.get() - 与上面完全相同，没有警报，不起作用

网站。 com/tabs/walkscore-get.html

// 3. .load() - 使用 walkscore js 加载 html 文件，不起作用

网站。 com/tabs/walkscore-load.html

// 4. $.getScript() - 不起作用

网站。 com/tabs/walkscore-getscript-external.html

// 5. $.getScript() 本地保存的walkscore js，不起作用

网站。 com/tabs/walkscore-getscript-local.html

// 6. $.requireScript() - 使用 jquery 插件，不起作用

网站。 com/tabs/walkscore-get-plugin.html

Answer 1

问题是他们编写 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>

Answer 2

我有解决问题的方法。我找到了一种避免使用 ajax 加载 walkscore javascript 而是使用简单的 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>');