表单在iframe中无法在Angular和IE11中重新获得焦点
Form in iframe unable to regain focus with Angular and IE11
我有一个Angular应用,它的路由中包含了一个iframe。iframe加载一个表单。在第一次加载路由时,您可以在表单中输入数据。在第二次加载路由时,表单输入无法在IE11中重新获得点击焦点。适用于Chrome和Firefox。
重建的具体步骤如下:
- 在IE11中加载页面
- 点击Iframe链接
- 数据可以输入到表单输入
- 当光标仍在表单输入时,单击Iframe链接
- 路由将重新加载,清除表单
- 当点击表单输入输入新文本时,表单无法恢复焦点
我注意到,如果您在输入文本后单击Home链接,然后单击iframe链接,则表单能够重新获得焦点,允许输入新文本。
下面是重新创建该问题的示例代码。你可以看到它在这里运行:http://matthewriley.github.io/iframe-form/.
注意,控制器会根据一个标志强制重载路由。这是为了支持这样一种业务需求:如果用户在iframe中,并选择单击iframe链接,路由将完全重新加载。
是什么原因导致IE11阻止窗体在iframe重新集中在第二次加载?
HTML页面<!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>
角应用
// 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>
我不知道是什么原因导致这个问题,可能是IE怪癖。无论如何,我发现它工作得很好,如果你在JS中手动聚焦iframe,但它必须在$timeout
。
我添加了一个ng-init到iframe,它基本上是手动聚焦iframe。
.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'
});
这是控制器
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")
})
}
}
相关文章:
- javascript处理一个对象数组以获得一个新的对象数组
- 当我添加一个新数字时,如何获得一些数字的即时平均值
- 参数为IE11的新日期
- 如何在遍历表和添加新元素时获得tr的索引
- 在IE11中,点击next或back按钮,使用intro.js打开一个新页面
- JS和JQuery:只有在更改后才能获得新的href
- Backbone.Collection 获得第一个 n 作为新集合
- ajax重新渲染时获得新值
- Javascript-如何在重定向后获得新窗口Referrer
- 手风琴扩大后获得新的高度.
- 组合以获得新的变量名称
- 获得“中止,因为不接受 0”并使用反应热加载器重新加载整页
- 如何获得老三的效果.新三.js中的精灵对齐
- Jquery 从 dom 获得新值
- 谷歌地图圈:如何在移动时触发事件以及如何获得新中心
- 当管理员在管理面板中获得新任务时,如何更改菜单按钮颜色
- 如何在粘贴时获得文本区域输入字段的新值
- WIN 8.1上的IE11:window.open正在打开新的弹出窗口
- 如何在数组中获得一个新的空对象
- 如何在ie11中获得范围对象