Question

鉴于此代码

var body = $('body')
var div = $('<div>').appendTo(body);
div.text('this is text, yo');
var input = $('<input>').attr('type','file').appendTo(body);
var demo = function(cb,wait){
    setTimeout(function(){ cb()},wait);
}
var alertMe = function(){ 
    $('div')
        .text('click on choose file!')
        .fadeIn().delay(3000).fadeOut()
};
var wait = 3000;
demo(alertMe,wait);

在this小提琴。如果你在Chrome和Firefox中看到div之后立即打开文件对话框，那么该模式的存在不会影响div的消失，但它会在IE（11）中发生。如果你等待div变得可见并且在IE中保持文件模态打开，div将无限期地保持可见，并且一旦你关闭div，似乎恢复执行JavaScript。

Answer 1

了解问题

文件选择器对话框在Internet Explorer中是脚本阻止的，类似于alert和prompt等其他对话框窗口。像这样的脚本阻止对话窗口变得越来越少;实际上，Xbox上的Internet Explorer甚至不支持它们 - Windows Web应用程序也不支持。

我创建了another demo以显示您在小提琴中的效果。每隔500毫秒，data-*元素就会更新<body>属性，然后在::after伪元素的内容属性中反映它的新值。在IE中，浏览文件时暂停此过程。

采取替代方法

请注意，这只是脚本的情况; CSS动画没有被阻止，因此可以利用CSS动画来调整布局或元素的显示，尽管有脚本阻塞窗口。在你的情况下，你可以利用一个特殊的类，在短暂的延迟后淡化一个元素，或者只是设置一个你想要隐藏的元素的不透明度的转换延迟。

我创建another demo来显示使用CSS动画的用法。

为什么Internet Explorer会这样做？

对话框是否应该阻止脚本编写的问题是我必须进一步研究团队的问题 - 我个人不知道这种行为目前是否属于规范。但是，Internet Explorer阻止编写脚本的原因之一是，当您完成选择时，我们将可以访问文件列表（以及其他内容）。

考虑the following fiddle：

var button = document.querySelector( "button" ),
    browse = document.querySelector( "input"  );

button.addEventListener( "click", getFiles );

function getFiles () {
    browse.click();
    document.body.appendChild( getFileList( browse ) );
}

function getFileList ( control ) {
    var list = document.createElement( "ul" );
    for ( var i = 0; i < control.files.length; i++ )
        list.appendChild( document.createElement( "li" ) )
            .textContent = control.files.item( i ).name;
    return list;
}

在上面我们打算在关闭选择文件对话框后向您显示您选择的文件（并且可能会继续上传）;因此，我们利用它是一个同步脚本阻止窗口的事实。

在Chrome或Firefox中，我们无法立即浏览control.files集合并构建所选文件的摘要列表。

结束思路

我会继续研究这个问题;事实上，我已经走下大厅，与负责DOM和事件的程序经理交谈，开始在这种情况下浏览Internet Explorer和Chrome / Firefox之间的区别。

我会在内部提出问题，让我们的团队进一步调查我们应该对此行为做些什么。在那之前，我希望这个答案可以帮助你在某种程度上找到不同实现之间的和谐。

文件选择器对话框阻止Internet Explorer中的脚本编写

1 个答案:

了解问题

采取替代方法

为什么Internet Explorer会这样做？

结束思路