这是您合并Onload事件的方式吗？

问题描述 投票：1回答：2

我有一个简短的问题。我正在尝试在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>
javascript html events onload
2个回答
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';" ...>
1
投票

在执行getElementById('videoBackground')时，标识为videoBackground的元素尚不存在。

0
投票

您的getElementById返回null，因为您的脚本在加载文档之前执行。加载所有页面内容后必须调用窗口。您可以使用document.ready事件而不是window.onload事件。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.