iframe中的表單無法通過Angular和IE11重新獲得焦點

Question

我有一個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>

Answer 1

我不知道是什么導致了這個問題，可能是IE怪癖。 無論如何，我發現如果你手動將iframe集中在JS中，但它必須在$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")
            })
    }
}

當然，將它包裝在指令中可能更清晰。

iframe中的表單無法通過Angular和IE11重新獲得焦點

問題描述

1 個解決方案

解決方案1
8 已采納 2015-08-19 09:58:31

iframe中的表單無法通過Angular和IE11重新獲得焦點

問題描述

1 個解決方案

解決方案1 8 已采納 2015-08-19 09:58:31

解決方案1
8 已采納 2015-08-19 09:58:31