Safari下Angular项目调用window.Trustpilot.loadFromElement未定义报错

根因说明 #

你遇到的兼容性差异核心来自两方面：

• Safari对第三方跨域脚本的加载优先级低于Chrome、Firefox，大概率你的ngAfterViewInit执行时，Trustpilot官方脚本还未完全加载完成
• 你代码中写的window.Trustpilot = window.Trustpilot || {}会在脚本加载完成前先初始化一个空的全局对象，Safari下Trustpilot脚本加载后不会覆盖已存在的全局对象，导致loadFromElement方法丢失，Chrome、Firefox的对象覆盖逻辑和Safari不同，所以其他浏览器可以正常运行

排查步骤 #

• 打开Safari开发工具的网络面板，检查Trustpilot官方脚本是否成功加载，是否被跨站跟踪防护功能拦截
• 检查脚本引入标签的属性，确认是否使用了async属性，该属性会导致脚本加载完成时机完全不固定
• 打断点确认ngAfterViewInit执行时，window.Trustpilot的具体值，判断是脚本未加载还是对象被提前初始化导致方法丢失

修复方案 #

第一步：删除冗余的全局对象初始化代码 #

去掉你代码里的window.Trustpilot = window.Trustpilot || {}这行，全局对象完全交给Trustpilot官方脚本创建，避免提前初始化导致的覆盖问题。

第二步：新增加载就绪判断逻辑 #

调整组件代码，增加轮询检查机制，确认方法存在后再执行调用，避免调用不存在的方法报错，修改后的完整代码如下：

import { Component, Input, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
declare global {
    interface Window { Trustpilot: any; }
}

@Component({
    selector: 'app-trustbox-normal',
    templateUrl: './trustbox-normal.component.html',
    styleUrls: ['./trustbox-normal.component.scss']
})
export class TrustboxNormalComponent implements OnInit, AfterViewInit, OnDestroy {
    private loadCheckTimer: NodeJS.Timeout | null = null;
    // 新增Input参数，解决多组件ID重复问题
    @Input() trustboxId: string = 'trustbox-default';

    constructor() { }

    ngOnInit(): void { }

    ngAfterViewInit(){
        this.initTrustbox();
    }

    private initTrustbox(): void {
        // 方法已就绪，直接调用
        if (window.Trustpilot && typeof window.Trustpilot.loadFromElement === 'function') {
            const trustboxRef = document.getElementById(this.trustboxId);
            trustboxRef && window.Trustpilot.loadFromElement(trustboxRef);
            return;
        }
        // 未就绪则每100ms检查一次，最多检查30次（3秒超时，可自行调整时长）
        let checkCount = 0;
        this.loadCheckTimer = setInterval(() => {
            checkCount++;
            if (window.Trustpilot && typeof window.Trustpilot.loadFromElement === 'function') {
                clearInterval(this.loadCheckTimer!);
                const trustboxRef = document.getElementById(this.trustboxId);
                trustboxRef && window.Trustpilot.loadFromElement(trustboxRef);
            } else if (checkCount >= 30) {
                clearInterval(this.loadCheckTimer!);
                // 可在此处添加超时降级逻辑，比如隐藏加载占位符
            }
        }, 100);
    }

    ngOnDestroy(): void {
        // 组件销毁时清除定时器，避免内存泄漏
        if (this.loadCheckTimer) {
            clearInterval(this.loadCheckTimer);
        }
    }
}

第三步：多组件适配（可选） #

因为你要嵌入3个TrustPilot组件，调用组件时给每个组件传入唯一的trustboxId，同时模板里的元素id要和传入的值动态绑定，避免ID重复导致只有第一个组件生效。

第四步：脚本引入优化（可选） #

如果你的Trustpilot脚本是在index.html中引入，把脚本标签的async属性替换为defer，既不会阻塞页面渲染，也能保证脚本按顺序执行，降低加载时序问题的概率。

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