javascript - 当应用程序转到后台时删除 DOM 元素

Question

当用户离开我的 Ionic 应用程序时，我尝试从 DOM 中删除 iframe，以便 YouTube 视频停止播放。

我正在使用暂停和恢复事件:

$ionicPlatform.on('resume', function() {
  $rootScope.$broadcast('onResume');
});

$ionicPlatform.on('pause', function() {
  $rootScope.$broadcast('onPause');
});

当我离开应用程序时，会触发 pause 事件，当我再次打开应用程序时，会触发 resume 事件(我检查了时间以确保它们不是同时发生)在 resume 上触发)，但 iframe 并未从 DOM 中删除。

我在包裹 iframe 的 div 上使用 ng-if="showVideo" 并使用 $scope.showVideo = false; 将其删除:

$scope.$on('onPause', function () {
  $scope.showVideo = false;
  alert(Date.now() / 1000);
});

当我使用 beforeLeave 事件切换页面时，效果非常好:

$scope.$on('$ionicView.beforeLeave', function () {
  $scope.showVideo = false;
});

当应用程序在后台时，Ionic 可以执行的操作是否存在某种限制？当用户离开应用程序时是否有其他方法可以停止视频？

Answer 1

我使用 YouTube iframe API 解决了这个问题:

$scope.$on('onPause', function () {
  $('iframe').each(function () {
    this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
  });
});

事实证明，当应用程序处于后台模式时，我们无法修改 DOM，但我们可以与 iframe 进行通信。