ajax - 注入我的脚本时如何等到嵌入的ajax调用完成？

Question

这是谷歌浏览器扩展开发。我正在使用内容脚本注入网页。然而，有些网页有自己的 ajax 脚本，可以动态更改内容。我如何等到这些脚本完成，因为在它们完成之前我的脚本无法获得正确的内容？

例如，

1-在谷歌搜索结果页面上，

2-我想将“文本”附加到每个搜索结果项的标题，这可以通过调用轻松完成，

$('h3').append("text");

3-然后听搜索查询的变化，由

$('input[name="q"]').change( function(eventObj){
    console.log("query changed");
    // DOESN'T work
    $('h3').append("text");
});

最后一行不起作用可能是因为在它执行时页面仍在刷新并且$('h3')不可用。当页面上的查询更改时，Google 使用 ajax 刷新搜索结果。

所以问题是如何捕捉这种变化，并且每次都能成功地附加“文本” ？

编辑：

尝试过但也没有工作：

$('h3[class="r"]').delay(1000).append("text");

并且使用.delay()并不是真正的首选。

编辑：

.delay()根本不是为了解决UI 效果以外的脚本执行暂停问题。一种解决方法是

$('input[name="q"]').change(function(eventObj) {    
    setTimeout(function() {
      $('h3[class="r"]').append(" text");
    }, 1000);
});

但正如我之前所说，setTimeout()连接速度取决于连接速度，而不是首选，因为我必须手动平衡等待时间和响应速度（我的脚本）。

虽然这篇文章被拒绝投票给上帝知道为什么我仍然会等待一个优雅的答案。

score 1 · Accepted Answer

也许使用 jQuery 1.7+（或使用“live”或“delegate”的旧版本）

$('form').on( "change", 'input[name="q"]', function(eventObj){
    console.log("query changed");
    $('h3').append("text");
});

如果form是另一个元素，请相应地更改它。

1 回答 1