iframe 中的表单无法使用 Angular 和 IE11 重新获得焦点答案

【问题标题】：Form in iframe unable to regain focus with Angular and IE11iframe 中的表单无法使用 Angular 和 IE11 重新获得焦点
【发布时间】：2015-08-14 16:38:52
【问题描述】：

我有一个 Angular 应用程序，其路由包含 iframe。 iframe 加载一个表单。在路线的第一次加载时，您可以在表单中输入数据。在路由的第二次加载时，表单输入无法重新获得对 IE11 中点击的关注。适用于 Chrome 和 Firefox。

重新创建的具体步骤如下：

在 IE11 中加载页面
点击 iframe 链接
数据可以输入到表单输入中
当光标仍在表单输入中时，单击 Iframe 链接
路线将重新加载，清除表单
单击表单输入输入新文本时，表单无法重新获得焦点

我注意到，如果您在输入文本后单击主页链接，然后单击 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>&nbsp;<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';
        }
    }
})();

Iframe 中的表单

<form method="post" action="">
    <input type="text" id="example1" name="example1" placeholder="sample text">
</form>

【问题讨论】：

打开开发者工具面板就可以了，不用tab键移动焦点就可以了。鼠标单击不起作用，非常奇怪的行为，但是通过右键单击 -> 选择所有选项，您可以获得焦点。尝试在 iframe 代码上添加一个简单的脚本，手动将焦点设置在第一个输入文本上
有一个外部机会这是 IE 本身的错误。 Microsoft Connect 上报告了一个类似问题：删除 IE 10/11 IFrame 导致失去聚焦输入元素的能力https://connect.microsoft.com/IE/feedback/details/1613994/ie-10-11-iframe-removal-causes-loss-of-the-ability-to-focus-input-elements

标签： javascript angularjs internet-explorer iframe angularjs-directive

【解决方案1】：

我不知道是什么导致了这个问题，可能是 IE 怪癖。无论如何，我发现如果你在 JS 中手动聚焦 iframe 效果很好，但它必须在 $timeout 中。

我在 iframe 中添加了一个 ng-init，它基本上手动聚焦 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")
            })
    }
}

当然，将它包装在指令中可能更简洁。

【讨论】：

这个答案解决了这个问题。为了将来参考，我更新了我的示例代码以包含修复：http://matthewriley.github.io/iframe-form/fix/。