Javascript html5游戏客户端呈现html资源的加载策略_Javascript_Html_Css_Iframe_Facebook Iframe

Javascript html5游戏客户端呈现html资源的加载策略

javascript html css iframe

Javascript html5游戏客户端呈现html资源的加载策略,javascript,html,css,iframe,facebook-iframe,Javascript,Html,Css,Iframe,Facebook Iframe,我正在开发一个HTML5 facebook游戏（在facebook画布iframe中），在这个游戏中，除了使用一些其他js文件、css文件（css文件中的图像文件）、字体文件、声音文件和屏幕（单独文件中的html div）外，我还使用jquery 我想要一个加载脚本，因为资源的大小大约为1MB。有两种选择第一个是编写一个资源加载器，并以正确的顺序加载所有内容，这真的很痛苦第二个是首先在启动时有一个简单的加载屏幕，在加载这个页面时，它将被快速加载，开始加载实际的html（使用js、css和ev

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

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

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

第二个是首先在启动时有一个简单的加载屏幕，在加载这个页面时，它将被快速加载，开始加载实际的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>
...


函数iframeisloated（）
{
...
}
...
...

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

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

您可以使用

iframe.load

事件执行此操作

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

（本例假设您正在使用IFrame的

src

属性加载内容）

纯Javascript：

编辑：（删除了jQuery示例，并根据注释添加了一个新示例）

下面是一个新示例，它检查子页面中的变量

done

，以检查该变量是否设置为true

警告由于跨域脚本安全性，此示例可能不起作用，仅当您100%确定两个页面位于同一域时才应使用此示例

子页面：

    var done = false;

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

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


加载。。。
var frame=document.getElementById（'iframeID'）；
var loading=document.getElementById（'loading'）；
frame.style.display='none'//最初隐藏框架
load.style.display='block'//最初显示加载屏幕
frame.src='Test2.aspx'//设置src属性
frame.onload=函数（）{
console.log（'Loaded Frame'）；
}
var$interval=setInterval（CheckFrameDone，500）；
函数CheckFrameDone（）{
var done=frame.contentWindow.done；
console.log（完成）；
如果（完成）{
console.log（'框架加载完成'）；
frame.style.display='block'；
load.style.display='none'；
clearInterval（$interval）；
}否则{
log（'仍在等待…'）；
}
}

在第二个示例中，您会注意到每500毫秒父页面将检查子页面的

done

值，如果该值为

true

，则将显示帧并清除间隔。否则它将继续检查。

您的答案部分正确。我还需要动态加载的资源来通知家长。举个例子，我需要确定浏览器类型并相应地加载mp3/ogg，这可以通过javascript完成。因此，我需要在iframe中处理加载处理程序并加载动态资源，如音频文件，然后才发送加载信号。当你在iframe中说

时，你只是指iframe链接到的页面吗？如果是这样，您可以尝试在父页面上运行

setInterval

，检查子页面上的变量是否设置为true，即在子页面上设置

var done=true仅当加载完成，并且当done==true显示帧时。
    var done = false;

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

<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>