Как установить высоту содержимого iframe в моем случае?

Question

Я пытаюсь настроить высоту содержимого IFrame через угловую

У меня есть что-то вроде

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

в моем контроллере

$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 
     } 

Как установить высоту содержимого IFrame через мой контроллер?

Спасибо!

Answer 1

Некоторые наблюдения из вашего кода:

1. ng-init не equivalient из $(window).on("load", function(){...}), больше информации о ng-init здесь: https://docs.angularjs.org/api/ng/directive/ngInit. Вот почему вы получаете undefined для x и y, потому что, когда этот код выполняется, iframe еще не загружен.

2. В угловой не рекомендуется обращаться к DOM с контроллера, подумайте о том, чтобы делать подобные операции в директиве.

3. Если вы начинаете с angularjs, я рекомендую вам попробовать не использовать jQuery.

В вашем случае я думаю, что то, что вы хотите, чтобы определить директиву как iframeSetDimentionsOnload и установить высоту там. Через несколько минут я приведу вам пример.

Ваша 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); 
     }) 
    } 
}}]) 

Используйте это так:

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