<!DOCTYPE html>
<html ng-app="iframeExample" ng-controller="mainController">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script data-require="ui-bootstrap@0.14.3" data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="iframeDirective.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">HEADING {{theFrame.width}} {{theFrame.contentScaledHeight()}}</div>
{{frameRefresh}}
<div class="panel-body">
<button ng-click="frameRefresh()">Refresh the frame</button>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-8">
<div class="panel panel-info">
<div class="panel-heading">IFrame</div>
<div id="thePanel" class="panel-body">
<div id="testFrame"
tt-responsive-iframe
tt-content-url="theUrl"
tt-content-height="1200"
tt-Content-width="1200"
tt-refresh-method="frameRefresh"
tt-refresh-delay="100"
>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
angular.module('iframeExample', ['testDirectives'])
.controller('mainController', ['$scope', '$document', '$filter', '$window', '$log', '$timeout', '$sce',
function($scope, $document, $filter, $window, $log, $timeout, $sce) {
$scope.theUrl = $sce.trustAsResourceUrl('test.html');
$scope.items = [{
id: 1,
label: "one"
}, {
id: 2,
label: "two"
}, {
id: 3,
label: "three"
}];
}
]);
Resizing iframe - AngularJS directive
==============
This directive attempts to produce an iframe where the content is automatically rescaled to fit the frame.
This is done by using the clientWidth and specified content width to calculate a scaling factor.
The 'scale' CSS transform is then used to rescale the iframe content.
Take a look at index.html to see an example of the directive in action.
<div id='testFrame'
tt-responsive-iframe
tt-content-url='theUrl' tt-content-height='1200'
tt-Content-width='1200'
tt-refresh-method='frameRefresh'
tt-refresh-delay='100'
>
</div>
Currently works on same domain iframes - working on cross domain as this seems to be tricky across browsers/devices.
<!DOCTYPE html>
<html ng-app="frameApp" ng-controller="frameController">
<head>
<link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script data-require="ui-bootstrap@0.14.3" data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.js"></script>
<script src="script2.js"></script>
</head>
<body>
<h1>The page was refreshed at {{test}}</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</body>
</html>
angular.module('frameApp', [])
.controller('frameController', ['$scope', function($scope) {
$scope.test=new Date();
}]);
(function() {
/** directive module */
var app = angular.module("testDirectives", []);
//IFRAME
var iframeController = ['$scope', '$filter', '$window', '$log', '$timeout', '$document',
function($scope, $filter, $window, $log, $timeout, $document) {
var getFrameWidth = function() {
var wrapperElem = $document[0].getElementById($scope.id+'Wrapper');
if(wrapperElem){
return wrapperElem.clientWidth;
}
}
$scope.theFrame = {
src: $scope.ttContentUrl,
width: getFrameWidth(),
contentWidth: $scope.ttContentWidth,
contentHeight: $scope.ttContentHeight,
contentScale: function() {
return this.width / this.contentWidth;
},
contentScaledHeight: function() {
return this.contentScale()*this.contentHeight;
},
frameScale: function() {
return (this.contentWidth / this.width) * 100 + "%";
},
update: function() {
this.width = getFrameWidth();
}
};
var currentFrame = $scope.theFrame;
$scope.ttRefreshMethod = function() {
updateScaling();
currentFrame.src = $scope.ttContentUrl + "?updatedAt=" + $filter('date')(new Date(), 'yyyyMMddhhmmss.sss');
};
var updateScaling = function() {
if(currentFrame.pendingUpdate){
$timeout.cancel(currentFrame.pendingUpdate);
}
currentFrame.pendingUpdate = $timeout(function (){
currentFrame.update();
$scope.$apply();
currentFrame.pendingUpdate = null;
},$scope.ttRefreshDelay);
};
var w = angular.element($window);
w.bind('resize', updateScaling);
updateScaling();
}
];
app.controller("iframeController", iframeController);
/**
* tt-responsive-iframe
*
* This directive produces an iframe whose content is scaled to fit the parent element.
*
* tt-content-url: the URL to loadf in the iframe
* tt-content-height: the height of the content to be displayed
* tt-content-width: the width of the content to be displayed
* tt-refresh-method: the name of the function which can be called to refresh the iframe
* tt-refresh-delay: the delay to use when resizing the window before resizing the frame
*
*/
app.directive('ttResponsiveIframe', function() {
return {
restrict: 'EA',
scope: {
id: '@',
ttContentUrl: '=',
ttContentHeight: '@',
ttContentWidth: '@',
ttRefreshMethod: '=',
ttRefreshDelay: '@',
},
templateUrl: 'responsiveIframeTemplate.html',
controller: iframeController
}
});
})();
<div id="{{id}}Wrapper" style="
height: {{theFrame.contentScaledHeight()}}px;
overflow: hidden;
">
<iframe id="{{id}}Frame" ng-src="{{theFrame.src}}" scrolling="no"></iframe>
<div id="{{id}}TransparentOverlay" style="
position:relative;
left:0%;
top:-200%;
width:100%;
height:200%;
overflow:hidden;
background-color:transparent;
z-index:999;
"></div>
</div>
<style>
#{{id}}Frame{
width: {{theFrame.contentWidth}}px;
height: {{theFrame.contentHeight}}px;
-ms-transform: scale({{theFrame.contentScale()}});
-webkit-transform: scale({{theFrame.contentScale()}});
transform: scale({{theFrame.contentScale()}});
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
</style>