ASP.NET MVC中布局页与页面的window.onload函数无法同时执行问题

问题原因 #

你遇到的核心问题是：window.onload是一个单一赋值属性，后赋值的函数会直接覆盖之前的绑定。你的代码里布局页和视图页都直接给window.onload赋值，最终只有最后一次赋值的函数会执行（当前场景中布局页的脚本执行在视图页之后，所以functionA覆盖了functionB，导致只弹出布局页的提示）。

解决方案 #

方案1：使用jQuery的$(document).ready()（推荐）

你已经引入了jQuery，它的ready事件支持绑定多个处理函数，不会互相覆盖，且执行时机比window.onload更早（DOM结构加载完成就执行，无需等待图片等资源加载）。

修改布局页代码：

<script>
    function functionA() {
            alert("Hello from Layout");
    }
    $(document).ready(functionA);
</script>

修改视图页Webpage.cshtml的Scripts区块：

@section Scripts
{
    <!-- 注意：布局页已引入jQuery，无需重复引入 -->
    <script>
    function functionB() {
        alert("Hello from WebPage");       
    }
    $(document).ready(functionB);
    </script>
}

方案2：保留window.onload，通过追加函数实现

如果必须使用window.onload，可以先保存原有绑定的函数，在新函数中调用它：

修改布局页代码：

<script>
    function functionA() {
            alert("Hello from Layout");
    }
    // 保存原有onload函数（如果存在）
    var originalOnLoad = window.onload;
    window.onload = function() {
        if (originalOnLoad && typeof originalOnLoad === 'function') {
            originalOnLoad();
        }
        functionA();
    };
</script>

修改视图页Webpage.cshtml的Scripts区块：

@section Scripts
{
    <script>
    function functionB() {
        alert("Hello from WebPage");       
    }
    var originalOnLoad = window.onload;
    window.onload = function() {
        if (originalOnLoad && typeof originalOnLoad === 'function') {
            originalOnLoad();
        }
        functionB();
    };
    </script>
}

方案3：使用addEventListener绑定load事件

现代浏览器支持通过addEventListener给window的load事件绑定多个处理函数，不会互相覆盖：

修改布局页代码：

<script>
    function functionA() {
            alert("Hello from Layout");
    }
    window.addEventListener('load', functionA);
</script>

修改视图页Webpage.cshtml的Scripts区块：

@section Scripts
{
    <script>
    function functionB() {
        alert("Hello from WebPage");       
    }
    window.addEventListener('load', functionB);
    </script>
}

额外提示：视图页的Scripts区块无需重复引入jQuery，布局页已经完成引入，重复引入会造成资源冗余。

内容的提问来源于stack exchange，提问作者Mister Rookie