iframeがJavaScriptにロードされているか確認するには

Question

読み込みに時間がかかるiframeで読み込み中です。 iframeが完全にロードされ、その高さを取得していることを確認する必要があります

iframeがJavaScriptでロードされているかどうかを誰かに確認する方法はありますか？

Answer 1

jQueryのloadメソッドを使用してiFrameをロードし、コールバックでその内容を取得できます。また、iFrameのコンテンツに応じて、さらに決定することができます。 JavaScriptで

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

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

Answer 2

、script、img、およびiframeタグすべてがイベントをサポートしています。

あなたがいずれかで、すでにansweredあるバニラJS、それを活用することができます

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

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

しかし、あなたは、特に角度でこれを実装する方法の例が必要な場合は、コントローラで行うことができますかディレクティブのリンク関数の中で、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の同等の準備ができて、そのためにイベントリスナー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>