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

Question

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

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

我想做的是将 walkscore google 地图加载到页面上的 div 之一。 我尝试过使用 $.get() 方法、.load()、$.getScript() 和 $.requireScript() jquery 插件，除了一种情况之外，没有任何效果，当我将alert() 放在 $.get 之后时（） 方法。 在这种情况下，浏览器不会重定向到任何地方，并且步行分数地图会显示在页面上。

这是我在头部的脚本：

<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. com/tabs/walkscore-with-alert.html

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

websvit。 com/tabs/walkscore-get.html

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

。 com/tabs/walkscore-load.html

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

websvit。 com/tabs/walkscore-getscript-external.html

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

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

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

websvit。 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>');