Come impostare l'altezza del contenuto iframe nel mio caso?

Question

Sto provando ad installare l'altezza del contenuto iframe attraverso angolare

ho qualcosa di simile

<iframe id='iframe' width='100%' height='600px' data-ng-init="init('iframe')" 
src='http://test.com' /> 

nel mio controller

$scope.init = function(id) { 
      console.log($('#'+ id)) -> show my iframe 
      var x= $('#'+ id)..contentWindow.document.body.scrollHeight; 
      console.log(x) -> gives me undefined 

      var y = $('#'+ id)..contentWindow; 
      console.log(y) -> give me undefined too 
     } 

Come impostare l'altezza contenuti iframe attraverso il mio controllore?

Grazie!

Answer 1

Alcune osservazioni dal codice:

1. ng-init non è l'equivalient di $(window).on("load", function(){...}), ulteriori informazioni su ng-init qui: https://docs.angularjs.org/api/ng/directive/ngInit. Ecco perché stai ricevendo undefined per x e , perché quando viene eseguito quel codice l'iframe non è ancora stato caricato.

2. In angolare non è una buona idea accedere al DOM dal controller, considerare invece di eseguire tali operazioni in una direttiva.

3. Se si inizia con angularjs, si consiglia di provare a non utilizzare jQuery.

Nel tuo caso penso che ciò che si vuole è quello di definire una direttiva come iframeSetDimentionsOnload e impostare l'altezza lì. Ti darò in esempio in pochi minuti.

tuo direttiva iframeSetDimensionsOnload:

yourApp.directive('iframeSetDimensionsOnload', [function(){ 
return { 
    restrict: 'A', 
    link: function(scope, element, attrs){ 
     element.on('load', function(){ 
      /* Set the dimensions here, 
       I think that you were trying to do something like this: */ 
       var iFrameHeight = element[0].contentWindow.document.body.scrollHeight + 'px'; 
       var iFrameWidth = '100%'; 
       element.css('width', iFrameWidth); 
       element.css('height', iFrameHeight); 
     }) 
    } 
}}]) 

usare in questo modo:

<iframe iframe-set-dimensions-onload src='http://test.com' />