Question

我有一个简单的问题。我想在HTML5中加入一个onload事件。这是我的代码，但它拒绝工作。请让我知道我做错了什么。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Animation</title>

    <script>
        document.getElementById('videoBackground').onload = function()
        {
            document.body.style.backgroundColor = 'black';
        }
    </script>

    <script type="text/javascript" src="js/animCD.js"></script>    
    <link rel="stylesheet" href="style.css" type="text/css" />

    </head>
    <body>

    <video id="videoBackground" poster="img/loading.png" onload="function()" width="1920" height="1080" preload="auto" onprogress="animCD_onprogress();" onended="animCD_start();">
        <source id="colorVid_mp4" type="video/mp4" src="img/luther_color.mp4">      
    </video>

Answer 1

指定someElement.onload = function() { } 是如何在一般意义上创建onload处理程序。你不工作的原因是你的脚本块出现在有问题的元素之前并立即运行，此时document.getElementById()找不到该元素，因为它尚未被解析。

您可以通过将脚本块移动到元素之后的某个位置（许多人将其脚本放在正文的末尾），或通过在页面的onload处理程序中调用它来解决此问题：

window.onload = function() {
    document.getElementById('videoBackground').onload = function() {
        document.body.style.backgroundColor = 'black';
    }
};

虽然在加载所有内容后应该调用页面/窗口的onload，所以我不确定从那里创建更多的onload处理程序是否有任何意义。

我注意到你的html中也有一个onload="function()"属性。这是另一种指定处理程序的方法，虽然内联事件属性不是首选的方法，但是您需要放置一个实际的函数名onload="someFunction()"来调用其他地方定义的命名函数，或者放置代码直接：

<video ... onload="document.body.style.backgroundColor='black';" ...>

Answer 2

在您执行getElementById('videoBackground')时，ID videoBackground的元素尚不存在。

在您创建videoBackground元素的位置下移动脚本，或者在使用document.onload加载DOM后运行脚本。

这是你如何整合Onload事件？

2 个答案: