How to get HTML from iframe in angular

Question

I want to get HTML code of header from iframe and put it to angular app. It's looks like:

iframe:

<div id="event-details-wrapper">
   <div id="event-details">Header</div>
</div>

angular html:

 <iframe id="welcome-iframe" ng-src="{{ welcomeUrl }}"></iframe>

 {{ header }}
  <br />
 <div ng-bind-html="header"></div>

angular js:

 $scope.welcomeUrl = $sce.trustAsResourceUrl('http://localhost:63342/welcome.html?id=123');

var html = $sce.trustAsHtml(angular.element('#welcome-iframe').contents().find('#event-details-wrapper').get(0).innerHTML) ;

$scope.header =   html + '<div>Hello</div>' ;

And result:

 ...</iframe>
      <div id="event-details">Header</div> //just text


      Hello //div element

How can I paste HTML from iframe to my app?

Answer 1

Just do something along the lines of:

var targetIFrame= window.frames['targetIFrame'].document;
var iFrameBody = targetIFrame.getElementsByTagName('body');
var iFrameHeader = iFrameBody.getElementById('event-details-wrapper');

$scope.header = iFrameHeader.innerHTML;