Detect iFrame SRC Change using AngularJS

Friday 13 February 2015 | Posted by Sample

We can detect iFrame source change with onload event. I tried to create iFrame onLoad event with directive, but that is not working. So here I am sharing the solution which is working.

Calling AngularJS function from javascript

JavaScript onload event for iframe works good. Here we are going to call AngularJS function from javascript function. To call AngularJS function, we need to get scope of the element.

var ifrm = document.getElementById('myIframe');
angular.element(ifrm).scope().onIframeLoad(ifrm.src);

Script

function myCtrl($scope) {
    $scope.onIframeLoad = function(src) {
        alert(src);
    };
}
function onLoadFunc() {
    var ifrm = document.getElementById('myIframe');
    angular.element(ifrm).scope().onIframeLoad(ifrm.src);
}