0

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?

Zheka Vasil
  • 87
  • 2
  • 10
  • 1
    Make sure `$scope.header = html + '
    Hello
    ' ;` should also use `$sce.trustAsHtml` & double check you have included `ngSanitize` module or not..     – Pankaj Parkar Feb 14 '17 at 20:26
  • Possible duplicate of [Get HTML inside iframe using jQuery](http://stackoverflow.com/questions/16103407/get-html-inside-iframe-using-jquery) – Taylor Buchanan Feb 14 '17 at 20:31

1 Answers1

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;
James B. Nall
  • 1,398
  • 3
  • 16
  • 27