html5游戏客户端渲染html资源加载策略答案

【问题标题】：Loading strategy of client side rendered html resources for html5 gamehtml5游戏客户端渲染html资源加载策略
【发布时间】：2013-11-27 08:44:23
【问题描述】：

我正在开发一个 HTML5 facebook 游戏（在 facebook 画布 iframe 中），其中除了一些其他 js 文件、css 文件（图像文件，在 css 文件中）、字体文件、声音文件和屏幕（ html div 在单独的文件中）。

我想要一个加载脚本，因为资源的大小约为 1 MB。有两种选择；

第一个是编写资源加载器并以正确的顺序加载所有内容，这真的很痛苦。

第二个是在启动时首先有一个简单的加载屏幕，它将在加载此页面时快速加载，开始加载实际的html（带有js，css和everyting）并将加载过程交给浏览器客户端.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    function iframeIsLoaded()
    {
        ...
    }
</script>
</head>
<body>
    <div id="loadingScreen" class="..."> <!-- iframe will be under this div -->
    ...
    </div>
    <iframe ...>
    </iframe>
...

显然第二种选择要好得多，但我不知道该怎么做。如上所示，我可能会在加载屏幕 div 下使用 iframe，但有没有办法从 iframe 向上层 div 发送消息？

我也愿意接受其他解决方案！

【问题讨论】：

标签： javascript html css iframe facebook-iframe

【解决方案1】：

您可以使用iframe.load 事件来做到这一点。

您要做的是在页面加载时隐藏 iframe 并显示加载屏幕，然后您想等到内容加载完毕然后显示框架并隐藏加载屏幕。

（本示例假设您使用 IFrame 的 src 属性来加载内容）

纯Javascript：Example JSFiddle

var frame = document.getElementById('iframeID');
var loading = document.getElementById('loadingScreen');

frame.style.display = 'none';//Originally hide the frame
loading.style.display = 'block';//Originally show the Loading Screen

frame.src = 'http://www.bing.com';//Set the src attribute

frame.onload = function() {
    frame.style.display = 'block';//Show the frame after it is loaded
    loading.style.display = 'none';//Hide the loading screen
}

编辑：（删除 jQuery 示例并添加基于评论的新示例）

这是一个新示例，它检查子页面的变量 done 以检查它是否设置为 true。

警告此示例可能由于跨域脚本安全性而无法工作，只有当您 100% 两个页面都在同一个域上时才应使用此示例

子页面：

    var done = false;

    setTimeout(function () {
        done = true;
    }, 10000);

父页面：（脚本需要放置在 HTML 之后 / 正文标记 () 结束之前）

<div>
    <div id="loading">
        Loading...
    </div>
    <iframe id="iframeID"></iframe>
</div>
<script type="text/javascript">
    var frame = document.getElementById('iframeID');
    var loading = document.getElementById('loading');

    frame.style.display = 'none'; //Originally hide the frame
    loading.style.display = 'block'; //Originally show the Loading Screen

    frame.src = 'Test2.aspx'; //Set the src attribute

    frame.onload = function () {
        console.log('Loaded Frame');
    }

    var $interval = setInterval(CheckFrameDone, 500);

    function CheckFrameDone() {
        var done = frame.contentWindow.done;
        console.log(done);
        if (done) {
            console.log('Frame is Finished Loading');
            frame.style.display = 'block';
            loading.style.display = 'none';
            clearInterval($interval);
        } else {
            console.log('Still Waiting...');
        }
    }
</script>

在第二个示例中，您会注意到每 500 毫秒父页面将检查子页面的 done 值，如果是 true，它将显示框架并清除间隔。否则它将继续检查。

【讨论】：

您的答案部分正确。我还需要动态加载的资源来通知父级。举个例子，我需要确定浏览器类型并相应地加载 mp3/ogg，这可以通过 javascript 完成。因此，我需要处理 iframe 中的加载处理程序并加载动态资源，如音频文件，然后才发送加载的信号。
当您说in the iframe 时，您只是指的是 iframe 链接到的页面吗？如果是这样，您可以尝试在父页面上运行setInterval 以检查子级上的变量是否设置为true，即仅在完成加载时设置var done = true; 上的子级，并且当done == true 显示框架时.