以角度为 iframe 添加动态高度答案

【问题标题】：Add dynamic height for iframe in angular以角度为 iframe 添加动态高度
【发布时间】：2016-09-28 06:16:09
【问题描述】：

有什么方法可以跟踪内部和 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 内的变化？

编辑：我上面的示例适用于文档就绪，即我能够获得文档就绪时的高度。我的问题是，如果稍后在 iframe 内单击后插入一个新的 div 会怎样。我希望 iframe 在没有滚动条的情况下具有动态高度。

【问题讨论】：

你到底是什么意思？就像如果 iframe 中有动态高度的 div，那么改变它也会改变 iframe 的高度？
如果在文档准备好后我的 iframe 中添加了一个新的 div，那么我们如何更改高度。我的 iframe 包含评论部分，客户可以在其中发表评论。我不想要滚动条，但我希望 iframe 的高度能够动态调整

标签： angularjs iframe

【解决方案1】：

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 高度。您可以根据需要进行修改。希望这会对你有所帮助。:)

【讨论】：

如果在文档准备好后添加一个新的 div 那么我们如何更改高度。我的 iframe 包含评论部分，客户可以在其中发表评论。我不想要滚动条，但我希望 iframe 的高度能够动态调整。