Meteor+Iron Router页面切换后Twitch播放器脚本未加载问题求助

这个问题我之前在Meteor+Iron Router的项目里也碰到过，核心原因就是Iron Router切换路由时会卸载旧模板及其关联的脚本/实例，但返回页面时模板重新渲染却没触发播放器的初始化逻辑。下面给你几个Iron Router原生的处理方案：

方案1：利用Iron Router的路由钩子onAfterAction #

你可以在/stream路由的定义中添加onAfterAction钩子，确保每次路由到这个页面时，都执行Twitch播放器的初始化代码——不管是首次进入还是从其他页面返回，都会触发这个逻辑：

Router.route('/stream', {
  name: 'stream',
  template: 'stream',
  onAfterAction: function() {
    // 先清理可能存在的旧播放器实例，避免重复创建导致冲突
    if (window.twitchPlayer) {
      window.twitchPlayer.destroy();
    }
    // 初始化Twitch播放器
    window.twitchPlayer = new Twitch.Embed("twitch-embed", {
      width: 854,
      height: 480,
      channel: "your-channel-name",
      // 这里添加你的其他播放器配置项
    });
  }
});

方案2：使用模板的onRendered生命周期钩子 #

更推荐的方式是把初始化逻辑绑定到模板本身的onRendered钩子上，因为Iron Router每次渲染模板时都会触发这个钩子，包括返回页面的场景。同时配合onDestroyed钩子清理实例，避免内存泄漏：

Template.stream.onRendered(function() {
  // 初始化Twitch播放器，把实例挂载到模板实例上方便后续清理
  this.twitchPlayer = new Twitch.Embed("twitch-embed", {
    width: 854,
    height: 480,
    channel: "your-channel-name",
  });
});

Template.stream.onDestroyed(function() {
  // 页面切换时销毁播放器实例，释放资源
  if (this.twitchPlayer) {
    this.twitchPlayer.destroy();
  }
});

方案3：处理动态加载的Twitch脚本 #

如果你的Twitch脚本是异步加载的（没有在全局head里固定引入），可能需要在渲染时确保脚本已加载完成。可以在onRendered里做检查，动态加载脚本后再初始化播放器：

Template.stream.onRendered(function() {
  const self = this;
  // 检查全局Twitch对象是否存在
  if (!window.Twitch) {
    const script = document.createElement('script');
    script.src = "https://embed.twitch.tv/embed/v1.js";
    script.onload = function() {
      // 脚本加载完成后再初始化播放器
      self.twitchPlayer = new Twitch.Embed("twitch-embed", {
        width: 854,
        height: 480,
        channel: "your-channel-name",
      });
    };
    document.body.appendChild(script);
  } else {
    // 脚本已存在，直接初始化
    self.twitchPlayer = new Twitch.Embed("twitch-embed", {
      width: 854,
      height: 480,
      channel: "your-channel-name",
    });
  }
});

需要注意的是，不管用哪种方案，都要确保播放器的容器元素（比如id="twitch-embed"）在模板中存在，并且每次渲染时是干净的（没有旧的DOM残留）。

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