在响应中使用脚本标签在 AJAX 上刷新浏览器

Question

我在使用 jQuery AJAX 调用时遇到了一些问题。当我请求一个没有 javascript 的页面时，我的代码工作正常，但是当我的代码中有脚本标签时，事情开始变得奇怪。

似乎任何引用外部 URL 的脚本标签都会导致浏览器重定向。在 Firefox 中，页面变为空白。在 safari 中，页面会清除并加载 AJAX 响应的内容。在两种浏览器中，URL 都不会改变。

具体说明我的问题；我有一个选项卡控件，我试图在其中嵌入 walkscore 小部件。由于它在客户端非常繁重，我只想在用户单击它所在的选项卡后实际加载它。walkscore AJAX 页面如下所示：

<script type="text/javascript">
  var ws_address = "1 Market St, San Francisco";
  var ws_width = "500";
</script>
<script type="text/javascript" src="http://www.walkscore.com/tile/show-tile.php?wsid=MY_WSID">
</script>

在 AJAX 调用中引用外部站点的脚本标签是否有一些限制？有什么好的办法吗？

-- 编辑--

好的，我已经玩了一段时间，并且稍微缩小了问题的范围。让我试着同时给出一个更好的解释：

我有两个文件，index.html 和 walkscore.html

index.html

function widget() {
  var widget = $('#walkscore');
  $.get('/walkscore.html', function(data) {
    $('#loading').slideUp(function() {
      widget.html(data);
      loaded[name] = true;
      widget.slideDown();
    });
  });
}

walkscore.html - 如顶部代码块所示

在 index.html 中，我有一个调用小部件函数的链接。每当我单击此链接时，整个页面都会被 js 文件的输出替换。无论 js 文件来自哪个域，它都会发生。它似乎只发生在其中包含 document.write 的 js 文件中。当我使用 $.getScript 函数时，它的行为方式完全相同，即使它位于 index.html 中

-- 编辑--

它似乎与document.write有关。我制作了 walkscore javascript 的副本，并用 jquery.html 替换了所有出现的 document.write，它似乎工作正常。我（显然）是一个 js 菜鸟。这是 document.write 的预期行为吗？为什么我在页面加载中包含脚本时它不这样做？

Answer 1

将脚本与html内容分开加载，可以使用$.getScript()。

Answer 2

它与响应中的 document.write 有关。我可以通过这样做在 Firefox 中解决这个问题：

<script type="text/javascript">

  // save default document.write function so we can set it back
  var write_func_holder = document.write;

  // redefine document.write to output text target div
  document.write = function(text) {
    $('#ad_container').html($('#ad_container').html() + text);
  }
</script>

<script language="JavaScript" type="text/javascript" src="javascriptfile">
</script>

<script type="text/javascript">
  // reset document.write function
 document.write = write_func_holder;
</script>

我在 Safari 中仍然遇到问题，浏览器刷新到只有 document.write 和 IE6 内容的空白页面，IE7 根本不执行任何操作。火狐虽然工作。

我希望这可以帮助某人找出问题所在，然后他们可以修复 IE6/7 和 Safari 问题

Answer 3

这是由于 document.write 调用而发生的。以下是有关正在发生的事情的一些信息：

在页面加载后编写

如果在页面加载完成后调用 document.write()，则页面的整个静态（非脚本生成）内容将替换为 write 方法的参数。这种情况最常出现在从事件处理程序调用 write 方法时——无论该方法是在事件处理程序调用的函数中还是单独在处理程序内部——因为事件处理程序是在页面完成加载后触发的。了解这一点很重要，因为静态内容替换并不总是理想的结果。内容覆盖的另一个常见场景与将内容写入新窗口有关。在这种情况下，空白页的覆盖是目标。 (source)

我采用的解决方案是删除 document.write 命令，并替换为 div 的内容。如果您正在加载外部脚本，并且无法控制它，则可以将 document.write 函数替换为您自己的函数。在这里讨论：

http://www.webxpertz.net/forums/showthread.php?threadid=11658

希望能帮助到那里的人！

Answer 4

替换 document.write 是要走的路。这是无耻的自我推销，但如果您有不平凡的情况，writeCapture.js 会处理所有边缘情况。

Answer 5

我会首先检查该脚本源的响应，可能是某些导致不需要的行为的原因。

Answer 6

我遇到了完全相同的行为，昨晚花了一些令人沮丧的时间试图找出问题所在并寻找答案无济于事。我很惊讶 jquery 文档中的任何地方都提到了这一点，因为这似乎是一个合理的问题，而不是一些疯狂的从未遇到过的错误。

无论如何，这是我的故事，以防有人搜索相关内容。

我有一个启用 jquery 的页面，它使用 $.ajax() 将一些内容加载到 div 中，这一切都很完美。我需要做的是包括其中一个 twitter 转发按钮，该按钮显示计数并允许您发布有关页面上内容的推文。为此，页面中应包含来自他们的一段简单的 javascript。

<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>

所以理论上，应该在 ajax 调用中返回该脚本标记，并且 jquery 应该执行它并包含它的结果，因为我在 $.ajax() 调用中将数据类型指定为 html。

仔细检查的外部脚本确实：

if(!url)
{
 var url=window.location.href;
}
if(!size)
var size="big";
var height="75";
var width="54"
if(size=="small")
{
  height="22";
  width="120";
}
if(!username)  
  var username="none";
url=url.replace("?", "*");
var src="http://www.retweet.com/widget/button/"+size+"/"+username+"/"+url;
document.write('<iframe src="'+src+'" height="'+height+'" width="'+width+'" frameborder="0" scrolling="no"></iframe>');

这显然在 document.write 上炸开了锅。

今晚我会尝试这篇文章中的方法，看看它们是否有效，谢谢你的信息。