Javascript Angular.js：在加载时更改Iframe高度&；更改内容

我有一个angular应用程序，它可以动态地将另一个页面加载到给定的iframe中。然后根据父页面的输入更改此iframe的范围

我用Angle代码将初始html加载到iframe中，并用一段普通javascript代码在窗口更改时更改iframe的大小

我如何实现：

在初始加载iframe以及每次更改内容时，我想根据内容调整iframe的高度（这样基本上看不到滚动条，内容似乎是页面的一部分）。

我的代码片段：

带iframe的HTML：

<div ng-app="cvForm" ng-controller="cvFormController">
    <iframe cvframe="" id="cv-output-frame" style="width: 100%; height: 1000px; border: none"></iframe>
</div>

更改窗口时调整高度的代码：

function resizeIframe() {
    var oIFrame = document.getElementById('cv-output-frame');

    oIFrame.style.height = oIFrame.contentWindow.document.body.scrollHeight + 'px';   
    console.log('cv pane iframe resized to: ' + oIFrame.style.height);
}

document.getElementById('cv-output-frame').onload = resizeIframe; 
window.onresize = resizeIframe;

resizeIframe();

我已经玩弄了指令和观察语句，但我仍然是初学者，不知道如何开始。我的伪例程类似于：

将内容加载到iframe中

将watch指令附加到iframe

改变初始载荷完成高度

在每次范围更改时，调整高度以反映新内容（在许多情况下，高度不会受到影响，因为范围更改最小）

---

感谢您的任何提示和指向正确的方向

假设您可以控制iframe，并且两者都在同一个域中，我所知道的完成此任务的最佳方法是使用该方法

基本上，在iframe将调整大小的任何实例上，都可以调用

window.parent.postMessage(yourMessage, 'http://yourdomain.com);

我可能会将包含的

iframe

设置为的高度发回，但您可以将任何内容传回。这里有一些安全问题，所以你一定要调查一下，但是这些问题应该很容易解决。然后在resize指令中：

angular.module('myApp.directives', [])
    .directive('resize', ['$window', function($window) {
        return {
            restrict: 'A',
            link: function resizeLink(scope, element, attributes) {
                angular.element($window).on('message', function(event) {
                    element.attr('height', event.data + 'px');
                });
            }
        };
    });

---

当您说“调整高度以反映新内容”时，您的意思是将内容删除/添加到iframe（如手风琴），还是在iframe内部的window.location发生更改时？另外，您是否可以控制iframe中加载的内容？对不起，如果我不清楚的话。我只将内容加载到Iframe一次。但是，Iframe内容链接到某个范围，我正在修改它，导致Iframe内容的高度发生变化，我希望对此作出反应。Iframe与您的应用程序在同一个域中吗？是的。一切都正常（加载内容、修改范围并将其绑定到iframe）。。。

angular.module('myApp.directives', [])
    .directive('resize', ['$window', function($window) {
        return {
            restrict: 'A',
            link: function resizeLink(scope, element, attributes) {
                angular.element($window).on('message', function(event) {
                    element.attr('height', event.data + 'px');
                });
            }
        };
    });