Question

我正在开发HTML5 facebook游戏（在facebook canvas iframe中），其中我使用jquery以及其他一些js文件，css文件（图像文件，css文件），字体文件，声音文件和屏幕（ html divs在单独的文件中。）

我希望有一个加载脚本，因为资源的大小约为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发送消息？

我也对其他解决方案持开放态度！

Answer 1

您可以使用iframe.load事件执行此操作。

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

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

Pure 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，它将显示帧并清除间隔。否则它将继续检查。

客户端的加载策略为html5游戏渲染了html资源

1 个答案: