javascript - 渲染整个文档后的回调，包括 iframe 中的 AJAX (js/jquery)

Question

我使用“HTML5Rocks!”中的幻灯片模板制作了一个幻灯片，并对其进行了修改以包含一些交互式 Google 图表。

不幸的是，最初 HTML5 幻灯片模板隐藏了除当前幻灯片、后面两张幻灯片和前面两张幻灯片之外的所有幻灯片(这是幻灯片的 css 默认值: .slides >article { display : none; })。我的交互式图形是幻灯片(即文章)，其中包含带有谷歌图表的iframe。不幸的是，首先渲染的幻灯片 display:none 与谷歌图表存在某种边界框问题:当幻灯片最终取消隐藏时，图表被压缩并且不具有交互效果。

我可以通过使用 display:block 启动默认幻灯片(即不仅仅是当前幻灯片及其相邻幻灯片，而是所有幻灯片)来解决此问题。然后，当您更改幻灯片时，我会主动隐藏非当前和非相邻的幻灯片。现在，所有图表都正确渲染，但在演示开始时，它显示最后一张幻灯片(因为所有图表都已绘制，并且是最后绘制的!)。

我想通过添加一个事件来解决这个问题，在加载所有内容后(即 iframe 中的 CPU 密集型 AJAX 调用完成运行)，非当前和非相邻幻灯片被隐藏。

为此，我需要在加载所有内容且浏览器准备就绪后触发回调事件(包括 iframe 内的 AJAX 调用):

我尝试了以下操作，但它触发得太早，在我的 iframe 中的 AJAX 回调完成之前:

jQuery(window).load( function() { /* some code to hide the non-current and non-neighboring slides */ } );

因此，在绘制图表之前，非当前和非相邻幻灯片会被隐藏，当这些图表幻灯片取消隐藏时，它们就会变形和损坏。我不相信我可以通过 AJAX 调用触发我的事件，因为我想要完成多个事件(来自多个幻灯片)。

这就是框架故事。这是我想知道的:在所有内容加载完毕并且浏览器完全准备好后是否会触发一个事件？

非常感谢您的帮助。

Answer 1

页面上 iframe 内的所有 AJAX 调用完成后，没有触发的内置 JavaScript 事件。

这里有几个处理 iframe 事件的示例:

• jQuery .ready in a dynamically inserted iframe
• Javascript callback when IFRAME is finished loading?

除此之外，您还需要跟踪每个 AJAX 调用，并在每次完成后检查是否所有调用都已成功完成。设置超时也可能是一个好主意，以防其中一个失败或不返回错误。

这是一个粗略的示例。

// Keep track of your ajax content.
var ajaxComplete1 = false;
var ajaxComplete2 = false;

var timeoutInterval; // For timeouts.

// Check if everything is complete.
function checkPageComplete() {
    if (ajaxComplete1 && ajaxComplete2) {
        clearInterval(timeoutInterval); // Clear timeout.
        // Everything has loaded, do your initialization.
    }
}

// Wait for the main page to load.
$(window).load(function() {

    // Wait 30 seconds for dynamic content to load.
    timeoutInterval = setInterval(function() {
        clearInterval(timeoutInterval);
        // Handle timeout.
    }, 30000);

    // Load the first content.
    $.ajax({
        url: 'someurl',
        success: function(data, textStatus, jqXHR) {
            ajaxComplete1 = true;
            checkPageComplete();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // Handle error.
        }
    });

    // Load the second content.
    $.ajax({
        url: 'anotherurl',
        success: function(data, textStatus, jqXHR) {
            ajaxComplete2 = true;
            checkPageComplete();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // Handle error.
        }
    });


});