Angular 15项目在Safari中assets脚本DOM元素获取失败求助

问题现象 #

项目在Chrome、Firefox等主流浏览器（含移动端）运行正常，但在Safari桌面/移动端15.6.1版本中，通过angular.json引入的src/assets/js/layout.js脚本无法获取到header、main、footer元素，返回null导致布局调整失效。

核心原因 #

Angular作为SPA框架，组件DOM的渲染时机晚于原生DOMContentLoaded事件的触发时间。你当前的原生脚本依赖DOMContentLoaded执行，但此时Angular还未完成根组件的视图渲染，所以无法找到目标元素——这一行为在Safari中表现得更明显，因为它对DOMContentLoaded的触发时机与其他浏览器存在细微差异。

解决方案 #

方案1：改用Angular生命周期钩子（推荐） #

利用Angular组件的AfterViewInit钩子执行布局逻辑，该钩子触发时组件视图已完全渲染，DOM元素已存在：

import { Component, AfterViewInit, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    this.resizeLayout();
  }

  @HostListener('window:resize')
  onResize(): void {
    this.resizeLayout();
  }

  private resizeLayout(): void {
    const header = document.querySelector('header');
    const main = document.querySelector('main');
    const footer = document.querySelector('footer');
    
    if (main) {
      main.style.minHeight = `${window.innerHeight - (footer?.offsetHeight || 0)}px`;
      main.style.paddingTop = `${header?.offsetHeight || 0}px`;
    }
  }
}

方案2：延迟原生脚本执行时机 #

如果必须保留原生JS文件，修改layout.js，通过循环检测元素是否存在来确保Angular已完成渲染：

'use strict';

function waitForElements() {
  const header = document.querySelector("header");
  const main = document.querySelector("main");
  const footer = document.querySelector("footer");
  
  if (header && main && footer) {
    layoutInit(header, main, footer);
  } else {
    requestAnimationFrame(waitForElements);
  }
}

var layoutInit = function layoutInit(header, main, footer){
    function resize(){
        main.style.minHeight = window.innerHeight - (footer?.offsetHeight ?? 0) + "px";
        main.style.paddingTop = (header?.offsetHeight ?? 0) + "px";
    }
     
    window.onresize = resize;
    resize();
}

waitForElements();

方案3：确认语法兼容性（已排除，但可验证） #

Safari 15.6.1已支持可选链?.和空值合并??语法，因此语法兼容性不是问题，但如果后续兼容更低版本Safari，可将语法替换为ES5兼容写法：

// 替换 footer?.offsetHeight ?? 0
footer ? footer.offsetHeight : 0

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