一、动态Title在单页应用中的重要性

在AngularJS单页应用(SPA)开发中，动态修改页面标题是提升用户体验的关键需求。然而iOS设备（特别是Safari和微信内置浏览器）存在独特机制：

• 页面加载时锁定Title：iOS首次加载后不再监听document.title变化
• 微信浏览器兼容问题：分享时仍显示初始标题
• SPA路由切换失效：传统AngularJS方法在iOS上无响应

二、AngularJS兼容iOS的Title动态解决方案

核心代码实现：

<script>
angular.module('app').run(['$rootScope', '$timeout', 
  function($rootScope, $timeout) {
    $rootScope.$on('$stateChangeSuccess', (event, toState) => {
      // iOS兼容核心：异步强制重写iframe触发标题刷新
      $timeout(() => {
        document.title = toState.data.title || '默认标题';
        
        // iOS特殊处理
        if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
          const iframe = document.createElement('iframe');
          iframe.style.display = 'none';
          iframe.src = 'data:text/plain;base64,';
          document.body.appendChild(iframe);
          setTimeout(() => document.body.removeChild(iframe), 0);
        }
      }, 0);
    });
  }
]);
</script>

关键优化点：

• 双重异步保障：$timeout + setTimeout确保DOM更新
• 动态iframe注入：触发iOS标题刷新机制
• 路由监听集成：结合ui-router状态机自动更新