Angular.js：更改加载时的iframe高度并更改内容

Question

I got an angular app that is dynamically loading a another page into a given iframe. This iframe's scope is then changed based on input's of the parent page.

I have angular code to load the initial html into the iframe and a piece of plain javascript code to change the iframe size on window change.

How can I achieve:

On initial load of the iframe as well as on each change of the content, I would like to adjust the iframe height to the content (so that basically no scrollbars are visible and content seems to be part of the page).

My code pieces:

HTML with iframe:

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

Loading content into iframe

/**
 * Load CV template
 */
cvFormApp.directive('cvframe', function($compile, $http, appConfig) {
    return function($scope, $element, tpl) {
      $http({
        url: appConfig.baseUrl + 'res/templates/mf_classic.html',
        method: 'GET'
      }).then(function(response) {
        var $body = angular.element($element[0].contentDocument.body), 
                    template = response.data;
        $body.append($compile(template)($scope)); //appended compiled element to DOM
      });
    };
});

Code to adjust height on window change:

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();

I have played around with directives and watch-statements, but I am still beginner and do not know how to start. My pseudo routine would be something like:

1. Load content into iframe
2. Attach watch-directive to iframe
3. Change on initial load complete the height
4. On every scope change adjust height to reflect new content (in many cases height will not be affected, as the scope changes are minimal)

Thanks for any hints and pointing in the right direction!

Answer 1

Assuming that you have control over the iframe and that both are on the same domain, the best way I know of accomplishing this task is by using the window.postMessage() method.

Essentially on any instance where your iframe will have resized, you can call

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

I would probably post back the height to set the containing iframe to, but you could pass anything back. There are some security concerns, so you should definitely look into those, but they should be easy to get around. Then in your resize directive:

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');
                });
            }
        };
    });