Laravel项目中defer属性为何未生效？

问题分析 #

你遇到的问题是：即使给头部的内联脚本加上了defer属性，仍然无法获取到DOM中的reservationDate输入框。这是因为内联defer脚本的执行时机在部分场景下可能不符合预期，脚本代码没有明确等待DOM完全就绪就直接执行了——虽然defer设计为DOM解析完成后执行，但内联脚本的浏览器处理逻辑有时会和外部脚本存在差异。

解决方案 #

你可以通过以下两种可靠方式确保脚本在DOM完全加载后执行，同时保持脚本放在HTML头部：

1. 监听DOMContentLoaded事件

这是最推荐的方式，它会在DOM结构完全解析完成、所有元素都可访问时触发，不会等待图片等资源加载：

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let dateInput = document.getElementById('reservationDate');
        alert(dateInput.value);
    });
</script>
@endsection

2. 使用window.onload事件

该事件会等待页面所有资源（包括图片、样式表）加载完成后触发，适合依赖资源加载状态的场景：

@section('scripts')
<script>
    window.onload = function() {
        let dateInput = document.getElementById('reservationDate');
        alert(dateInput.value);
    };
</script>
@endsection

额外说明 #

如果坚持使用defer，需要确保页面中没有其他同步脚本阻塞DOM解析，并且内联脚本的defer属性被浏览器正确识别。但上述两种事件监听的方式兼容性更强，几乎不会出现执行时机的问题。

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