필자의 경우 iframe 콘텐츠 높이를 설정하는 방법은 무엇입니까?

Question

나는

$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이 콘텐츠 높이를 설정하는 내 컨트롤러에

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

같은 뭔가를

각

를 통해 설정에 iframe이 콘텐츠 높이를 노력하고 있어요?

감사합니다. 코드에서

Answer 1

일부 관찰 : https://docs.angularjs.org/api/ng/directive/ngInit :

1. ng-init는 $(window).on("load", function(){...})의 equivalient에 대한 ng-init 여기에 자세한 내용이 아닙니다. 따라서 코드가 실행될 때 iframe이 아직로드되지 않았기 때문에 을 x 및 y으로 가져 오는 것입니다.

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' />