I wrote a function that resizes the height of an iframe element to always be 100% after it loads:
app.directive('iframeAutoSize', [function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.on('load', function() {
console.log(element[0]);
var iFrameHeight = element[0].contentWindow.document.body.scrollHeight + 'px';
element.css('height', iFrameHeight);
});
}
}}]);
usage:
<iframe iframe-auto-size src="..." />
Issue: I encounter an error when trying to use this function:
Error: Permission denied to access property "document"It seems accessing window.document on the iframe element is not allowed. Is there another way to determine the height?
I would like to handle this with a pure Angular/JS solution without relying on jQuery.