如何检查 iframe 是否在 JavaScript 中加载答案

【问题标题】：How to check iframe is loaded in JavaScript如何检查 iframe 是否在 JavaScript 中加载
【发布时间】：2016-05-03 15:12:42
【问题描述】：

我正在加载需要一些时间才能加载的 iframe。我需要检查 iframe 是否已完全加载并获取它的高度

谁能告诉如何检查 iframe 是否在 JavaScript 中加载？

【问题讨论】：

iframe 的 URL 是否在同一个域中？

标签： javascript angularjs iframe

【解决方案1】：

您可以使用 jQuery 的 load 方法来加载 iFrame，然后在回调中获取它的内容。根据 iFrame 的内容，您可以做出进一步的决定。

$('#iFrame').load(cbLoaded);

function cbLoaded()
{
   var doc = $('#iFrame').contents()[0].documentElement;
   // Get contents here:
   var content = doc.innerText || doc.textContent;
}

【讨论】：

【解决方案2】：

在 JavaScript 中，script、img 和 iframe 标记都支持 load 事件。

您可以在已经是 answered 的 vanilla JS 中使用它，其中之一是：

document.getElementById('#my-iframe').addEventListener('load', function () { ... });

document.getElementById('#my-iframe').onLoad = function() { ... };

但是，如果您需要一个示例来具体说明如何在 Angular 中实现这一点，您可以在控制器中或在指令的链接函数中使用 element 参数来实现。

在控制器中：

myApp.controller('SomeController', ['$scope', function($scope) {
  var iframe = angular.element('#my-iframe');
  iframe.on('load', function() {
    console.log(iframe.height());
  });
}]);

在指令中：

myApp.controller('SomeController', ['$scope', function($scope) {
  $scope.foo = 'bar';
}])
.directive('myDirective', ['$interval', function($interval) {
  function link(scope, element, attrs) {
    var iframe = element.find('#my-iframe');
    iframe.on('load', function() {
      $interval(function() {
        console.log(iframe.height();
      }, 1000);
    });
  }

  return {
    link: link
  };
}]);

【讨论】：

一旦我将控制器内容放入 $timeout(...,0) 中，这对我有用

【解决方案3】：

在 javascript 中，您可以在 DOMContentLoaded 上侦听，jQuery 等效于 document ready，因此将事件侦听器 onload 添加到 iframe：

document.addEventListener("DOMContentLoaded", function(e) {
  document.getElementById('ifrm').addEventListener('load', function(e) {
    document.body.innerHTML += '<p>Iframe loaded</p>';
  }, false);
});

&lt;iframe id='ifrm' src="https://www.wikipedia.org/"&gt;&lt;/iframe&gt;

【讨论】：