Javascript 如何获得ajaxget请求，在返回响应之前等待页面呈现？

我正在为（Site1）中的页面编写Greasemonkey脚本。Site1有各种各样的交易和优惠，我的GM脚本旨在实现以下目标：

当您访问Site1上的报价时，脚本将查询该酒店是否也在Site2上列出。如果是，请在Site1上显示Site2的搜索结果

问题是Site2显示一个进度条（“加载结果”），然后显示结果。因此，我的Ajax请求总是返回空结果，如下所示（请参阅红色方框部分）：

但是，它实际上应该包含Site2搜索结果的完整内容，如下所示：

我尝试了一个同步Ajax请求以及

GM\u xmlhttpRequest

，但没有成功

这是站点2有问题的进度条：

在将响应返回到Site1之前，如何让AJAX请求等待Site2上的搜索完全呈现

供参考

以下是相关的代码片段：

$(document).ready(function(){   
var rewardsSiteResults = $('<div class="panel deal-panel rc-lr"></div>').attr('id', "rewardsSiteResults")
        .html("<p>" + progressMessageText + "</p> ").append(spinnerGif);
$(insertSelector).after(rewardsSiteResults);

var addressMap = getAddressOfHotel();
var pinCode = addressMap[pinCodePlaceHolder];
var hotelName = addressMap[hotelNamePlaceHolder];
var queryURL = constructQueryURL(pinCode, hotelName);

$.ajaxSetup({async:true, timeout: 5000});
$.get(queryURL,null, function(response) {
    if(!displayed){
        displayed=true;
        //rewardsSiteResults.html("adfaasddsf");
        var text = $(response).find("#col2");
        $(text).find("script").remove();

        //console.log(text.html())
//          $('<iframe id="someId"/>').appendTo('#rewardsSiteResults')
//          .contents().find('body').append(response);
        rewardsSiteResults.html("<div class='panel deal-panel rc-lr'>" + text.html() +"</div>");
        //console.log(response);
    }
},'html');  
});

$（文档）.ready（函数（）{
var rewardsSiteResults=$（''）.attr（'id'，“rewardsSiteResults”）
.html（“”+progressMessageText+“
”）.append（spinnerGif）；
$（insertSelector）.after（RewardsSetResults）；
var addressMap=getAddressOfHotel（）；
var pinCode=addressMap[pinCodePlaceHolder]；
var hotelName=addressMap[hotelnamep占位符]；
var queryURL=constructQueryURL（pinCode，hotelName）；
$.ajaxSetup（{async:true，超时：5000}）；
$.get（queryURL，null，函数（响应）{
如果（！显示）{
显示=真；
//rewardsseteresults.html（“adfaasddsf”）；
var text=$（响应）.find（#col2”）；
$（文本）。查找（“脚本”）.remove（）；
//console.log（text.html（））
//$（“”）.appendTo（“#rewardsSiteResults”）
//.contents（）.find（'body'）.append（response）；
rewardsiteresults.html（“+text.html（）+”）；
//控制台日志（响应）；
}
}，'html'）；
});

为了让AJAX“等待页面呈现”，它实际上必须完全处理页面，获取并运行所有包含的CSS和javascript文件。这不容易，也不推荐。幸运的是，你无论如何都不需要这样做

以下是处理此类问题的三种更好的方法：

资源页面（mpdining.rewardsnework.com，用于此问题）可能有一个API。如果有，找到并使用它。如果有，这是你最好的选择

分析资源页面的javascript和/或AJAX请求。使用

GM_xmlhttpRequest（）

直接获取有效负载数据，而不是尝试解析资源页

有时这个过程相当简单，但有些站点需要复杂的交互和/或身份验证

在隐藏的iframe中加载资源页面；将Greasemonkey脚本设置为同时在资源页和母版页上运行，并使用中继所需数据

这种方法几乎总是有效的，尽管您可能必须防止某些页面试图“弹出”iframe

---

使用隐藏的iframe从跨域资源页获取数据： Greasemonkey脚本将在普通页面和iFrame内的页面上运行。事实上，您可以将同一脚本设置为同时在两个域和多个域上运行

如果母版页和iframed资源页都在运行GM脚本，则脚本实例可以使用跨域的方式相互通信

例如，假设我们有一个包含旅行数据的站点，我们希望将该站点与来自资源站点的匹配数据进行混搭，该资源站点使用AJAX获取有效负载数据

看起来像这样：

一开始看起来是这样的：

然后是这样结束的：

以下脚本：

在隐藏的iframe中加载资源页

启动在iframed页面上运行的自身的第二个实例

等待iframed页面完成，根据需要处理结果

将所需的有效负载数据发送到目标（母版）页面上运行的GM脚本

然后，目标页面的脚本插入有效负载数据以完成mashup

/==UserScript==
//@name\u跨站点，AJAX刮擦演示
//@包括http://fiddle.jshell.net/9ttvF/show/
//@包括http://jsbin.com/ahacab*
//@需要http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
//@需要https://gist.github.com/raw/2625891/waitForKeyElements.js
//@grant GM_addStyle
//==/UserScript==
if（/fiddle\.jshell\.net/i.test（location.host））{
console.log（“***母版页开始…”）；
/*---通知用户。
*/
$（“#结果”）。之前(
“Greasemonkey正在从jsbin.com获取结果…”
);
/*---用于处理来自iFrame上运行的GM实例的消息的设置：
*/
window.addEventListener（“消息”，receiveMessage，false）；
/*---在隐藏的iframe中加载资源站点。
*/
$（“正文”）。附加（“”）；
}
否则{
console.log（“***框架开始…”）；
/*---等待内容中的AJAXed。。。
*/
WaitForkEyements（“results table.rezTable”，sendResourcePageData）；
}
函数sendResourcePageData（jNode）{
console.log（“找到结果！将其发送到主窗口…”）；
window.top.postMessage（jNode.html（），“*”）；
}
函数接收消息（事件）{
如果（event.origin！“http://jsbin.com）返回；
$（“#gmFetchRez”）.html（event.data）；
}
//---使用CSS控制外观。
GM_addStyle（“\
#gmIframe{\
显示：无\
}                                           \
#格米雷斯{