JS逆向：DOM交互与window.onload详解

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS逆向</title>
</head>
<body>
    HTML交互
    <script src="button_click.js"></script>
<button id="b1" onclick="btn_click()">和JS产生了函数绑定 </button>
</body>
</html>

以下是button_click.js代码内容，如下：

复制代码

// 定义HTML中按钮绑定的btn_click()全局函数
function btn_click() {
    // 可选：获取按钮元素，增强交互效果
    const btn = document.getElementById('b1');
    
    // 核心交互逻辑（可根据需求修改）
    alert('按钮被点击了！HTML与JS交互成功～');
    console.log('点击事件触发，按钮DOM节点：', btn);
    btn.style.backgroundColor = '#4CAF50';
    btn.style.color = 'white';
}

运行结果如下：

另一种调用方式如下：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS逆向</title>
</head>
<body>
    HTML交互
    <script>
        window.onload = function (){
            document.getElementById('b1').onclick = function (){
                alert('通过页面加载绑定JS')
            }
        }
    </script>
<button id="b1" onclick="btn_click()">和JS产生了函数绑定 </button>
</body>
</html>

运行结果如下：

关键知识点：

详解 `window.onload`

重点关注 window.onload，下面全面解析它的定义、作用、执行时机以及相关注意事项：

一、`window.onload` 核心定义

window.onload 是 浏览器（Window 对象）提供的一个页面加载事件处理属性 ，它用于指定一个回调函数，这个回调函数会在整个页面完全加载完成后才自动执行。

这里的「整个页面完全加载」包含所有页面资源，不仅仅是 DOM 结构，具体包括：

HTML 文档解析生成的 DOM 树（所有标签、元素）
外部引入的资源：CSS 样式表、JavaScript 文件、图片（<img>）、音频 / 视频、字体文件等
框架页面（<iframe>）中的内容

二、`window.onload` 的核心作用

它的核心价值在于 解决「JS 操作未加载完成的 DOM 元素」导致的报错问题。

在浏览器解析 HTML 时，是按照「从上到下」的顺序逐行执行的：如果 JS 脚本写在 DOM 元素之前（比如<head>中的脚本操作<body>中的按钮），当脚本执行时，目标 DOM 元素还未被解析生成，此时调用document.getElementById()等方法获取元素会返回null，后续操作该元素的属性（如onclick）会抛出Uncaught TypeError错误。

而window.onload包裹的 JS 代码会等待所有资源加载完成（DOM 自然也已全部生成），此时操作任何 DOM 元素都安全，不会出现「元素不存在」的报错。

示例回顾（体现核心作用）：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window.onload 示例</title>
    <script>
        // 未用 window.onload：脚本在head中，执行时body中的b1还未生成
        const btn1 = document.getElementById('b1');
        console.log(btn1); // 输出：null（无法获取元素）

        // 用 window.onload：等待页面完全加载后执行，可正常获取元素
        window.onload = function() {
            const btn2 = document.getElementById('b1');
            console.log(btn2); // 输出：<button id="b1">按钮</button>（正常获取）
            btn2.onclick = function() {
                alert('DOM操作安全执行');
            }
        }
    </script>
</head>
<body>
    <button id="b1">测试按钮</button>
</body>
</html>

三、`window.onload` 的执行时机

执行顺序靠后 ：在页面加载流程中，window.onload 是最晚触发的事件之一，只有当所有资源（DOM + 外部资源）加载完毕才执行，等待时间可能较长（比如页面包含大图片、慢加载的外部脚本）。
仅执行一次 ：window.onload 是赋值式事件绑定（window.onload = 回调函数），如果多次赋值，后面的回调函数会覆盖前面的，最终只会执行最后一个赋值的函数。

示例（多次赋值覆盖问题）：

复制代码

<script>
    // 第一个赋值的回调
    window.onload = function() {
        alert('这是第一个回调（会被覆盖）');
    }

    // 第二个赋值的回调（最终执行这个）
    window.onload = function() {
        alert('这是第二个回调（最终生效）');
    }
</script>

JS逆向：DOM交互与window.onload详解

关键知识点：

详解 window.onload

一、window.onload 核心定义

二、window.onload 的核心作用

三、window.onload 的执行时机

详解 `window.onload`

一、`window.onload` 核心定义

二、`window.onload` 的核心作用

三、`window.onload` 的执行时机