Menu
I have an Angular app with a route that contains an iframe. The iframe loads a form. On the first load of the route, you are able to enter data into the form. On the second load of the route the form input is unable to regain focus on click in IE11. Works in Chrome and Firefox.
The specific steps to recreate are as follows:
I noticed that if you click the Home link after entering text, then click the iframe link the form is able to regain focus allowing new text to be entered.
Below is sample code that recreates the issue. You can see it running here: http://matthewriley.github.io/iframe-form/.
Note that the controller forces a reload of the route based on a flag. This is to support a business requirement that if a user is in the iframe and choses to click the iframe link, the route will fully reload.
What causes IE11 to prevent the form in the iframe from regaining focus on the second load?
HTML Page
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Iframe Reload Test</title>
</head>
<body>
<div ng-app="IframeTest">
<p><span><a href="#/">Home</a></span> <span><a href="#/iframe">Iframe</a></span></p>
<div ui-view></div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Angular App
// app.routes.js
(function() {
'use strict';
angular
.module('IframeTest', [
'ui.router',
'IframeTest.iFrameModule'
])
.config(routeConfig);
routeConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
function routeConfig($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url:'/',
template: '<h4>Home</h4><p>This is the home page.</p>'
})
.state('iFrame', {
url:'/iframe',
template: '',
controller: 'IFrameCtrlAs',
controllerAs: 'vm'
})
.state('iFrame/:flag', {
url:'/iframe/:flag',
template: '<h4>Iframe</h4><p><iframe src="{{vm.url}}" id="iframeID" frameborder="1" width="100%" scrolling="no"></iframe></p>',
controller: 'IFrameCtrlAs',
controllerAs: 'vm'
});
}
})();
// iFrame.controller.js
(function() {
'use strict';
angular
.module('IframeTest.iFrameModule', [])
.controller('IFrameCtrlAs', IFrameCtrlAs);
IFrameCtrlAs.$inject = ['$stateParams', '$location'];
function IFrameCtrlAs($stateParams, $location) {
var vm = this;
if(!angular.isDefined($stateParams.flag)){
var reloadPath = $location.path() + '/true';
$location.path(reloadPath);
}
else{
vm.url = 'form.html';
}
}
})();
Form in Iframe
<form method="post" action="">
<input type="text" id="example1" name="example1" placeholder="sample text">
</form>
839
I have no idea what causes this issue, probably IE quirk.
Anyway, I found that it works just fine if you focus the iframe manually in JS but it must be in a $timeout.
I added an ng-init to the iframe that basically focuses the iframe manually.
.state('iFrame/:flag', {
url:'/iframe/:flag',
template: '<h4>Iframe</h4><p><iframe src="{{vm.url}}" ng-init="vm.init()" id="iframeID" frameborder="1" width="100%" scrolling="no"></iframe></p>',
controller: 'IFrameCtrlAs',
controllerAs: 'vm'
});
And here's the controller
function IFrameCtrlAs($stateParams, $location, $timeout) {
var vm = this;
if(!angular.isDefined($stateParams.flag)){
var reloadPath = $location.path() + '/true';
$location.path(reloadPath);
}
else{
vm.url = 'form.html';
}
vm.init = function(){
$timeout(function(){
document.getElementById("iframeID").contentWindow.focus();
console.log("loaded")
})
}
}
Of course, it might be cleaner to wrap this in a directive.
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
