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

Question

我正在iframe中加载，加载需要一些时间。 我需要检查iframe是否已完全加载并获取其高度

谁能告诉我如何检查JavaScript是否已加载iframe？

Answer 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;
}

Answer 2

在JavaScript中， script ， img和iframe标签均支持load事件。

您可以在已经回答过的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
  };
}]);

Answer 3

在javascript中，您可以监听DOMContentLoaded ，它相当于jQuery就绪的jQuery，因此将事件监听器onload添加到iframe：

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

 <iframe id='ifrm' src="https://www.wikipedia.org/"></iframe>