2016-09-28 8 views
1

내부 및 iframe의 변경 사항을 추적 할 수있는 방법이 있습니까? iframe 내부에서 변경 내용을 추적하고 이에 따라 새 높이를 설정하려고합니다.각도로 표시된 iframe의 동적 높이 추가

나는 각진 세계에 처음으로 나를 안내 할 사람이 필요합니다. 다음 코드

HTML을

<div ng-controller="myCtrl" class="iframe_wrap"> 
    <iframe id="displayframe" src="file:///C:/Users/Dell/Desktop/test2.html" frameborder="0" scrolling="no" style="border:2px solid black;width: 100%; overflow: hidden; height: {{count}}px;"></iframe> 
</div> 

JAVASCRIPT

angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope) { 
    $scope.count = document.getElementById('displayframe').contentWindow.document.body.offsetHeight; 
}]); 

사용할 수있는 iframe이 내부의 변화를 추적 할 수있는 수신기가 있습니까?

편집 : 위의 예는 문서가 준비되어있는 상태에서 작동합니다. 즉, 문서를 준비 할 때 높이를 얻을 수 있습니다. 내 질문은 나중에 if div if 새로운 iframe 내부의 클릭 후 삽입됩니다. 스크롤 막대가 없어도 iframe에 동적 높이가 있어야합니다.

+0

정확히 무슨 뜻 이죠? iframe에 동적 높이의 div가있는 것처럼 iframe의 높이도 변경됩니까? –

+0

문서가 준비된 후에 새 div가 iframe 내부에 추가되면 어떻게 높이를 변경합니까? 내 iframe은 고객이 댓글을 게시 할 수있는 댓글 섹션으로 구성됩니다. 스크롤 막대는 필요 없지만 동적으로 조정할 iframe의 높이를 원합니다. –

답변

0
angular.module('myApp', []).controller('myCtrl', ['$scope',function($scope) { 
    $(document).ready(function() { 
    $("#displayframe").on('load', function() { 
    var divElement = $(this).contents().find("div"); 
    var height  = divElement.height(); 
    $scope.count = height; 
    }); 
}); 
}]); 

내부에 div가있는 경우이를 사용하여 iFrame 높이를 변경할 수 있습니다. 필요에 따라 수정할 수 있습니다. 희망이 당신을 도울 것입니다. :)

+0

문서가 준비된 후에 새 div가 추가 된 다음 높이를 변경하는 방법은 무엇입니까? 내 iframe은 고객이 댓글을 게시 할 수있는 댓글 섹션으로 구성됩니다. 스크롤 막대는 필요 없지만 iframe의 높이를 동적으로 조정하고 싶습니다. –