ios “alert()”和“confirm()”不适用于“apple-mobile-web-app-capable”

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18903525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-31 01:25:30  来源:igfitidea点击:

"alert()" and "confirm()" not working with "apple-mobile-web-app-capable"

javascriptiossafariios7

提问by allaire

Under iOS (currently 7.0), it looks like alert()and confirm()are not working when our web app is pinned to the home screen (aka using the meta tag apple-mobile-web-app-capable).

在 iOS(当前为 7.0)下,当我们的 Web 应用程序固定到主屏幕(也就是使用元标记)时,它看起来像alert()并且confirm()不工作apple-mobile-web-app-capable

I found a user having a similar issue on twitter:

我在 twitter 上发现一个用户有类似的问题:

https://twitter.com/thomasfuchs/status/380137801259704320

https://twitter.com/thomasfuchs/status/380137801259704320

Anybody has a temporary fix if it's really a bug in iOS 7?

如果它真的是 iOS 7 中的错误,有人有临时修复吗?

采纳答案by andersen

The JavaScript alert()and confirm()bugs are fixed as of iOS 7.0.3.

JavaScriptalert()confirm()错误从 iOS 7.0.3 开始修复。

回答by Barrie

We had a similar issue with alerts breaking our web app. The specific case was an alert which was triggered from the onchange of a select list. We put together a very simple test page like this:

我们遇到了类似的问题,警报破坏了我们的网络应用程序。特定情况是从选择列表的onchange 触发的警报。我们整理了一个非常简单的测试页面,如下所示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <select onchange="alert('broken!');">
            <option value="one">One</option>
            <option value="two">Two</option>
        </select>
    </body>
</html>

Running that page from Safari in an iPad and changing the select list triggers the alert then Safari freezes. You actually have to then close Safari. This affects Safari in general - your web app doesn't have to be pinned to the home screen. You should be able to test this on an iPad running iOS 7 on this test page http://jsbin.com/AGoTejA/1.

在 iPad 中从 Safari 运行该页面并更改选择列表会触发警报,然后 Safari 会冻结。您实际上必须然后关闭 Safari。这通常会影响 Safari - 您的网络应用程序不必固定在主屏幕上。您应该能够在此测试页面http://jsbin.com/AGoTejA/1上运行 iOS 7 的 iPad 上进行测试。

We have tested this on an iPad 2 (MC774B/A) and an iPad 3 (MD367B/A) and Safari crashes on both.

我们已经在 iPad 2 (MC774B/A) 和 iPad 3 (MD367B/A) 上对此进行了测试,并且 Safari 在两者上都崩溃了。

A hacky way to get around this is to use a setTimeout() to delay execution of the alert. The problem only seems to happen when Safari is trying to display the overlay which shows the select list items and an alert at the same time. confirm() is also broken in the same way.

解决这个问题的一个技巧是使用 setTimeout() 来延迟警报的执行。该问题似乎仅在 Safari 尝试显示同时显示选择列表项和警报的叠加层时发生。确认()也以同样的方式被破坏。

回答by Richard Wilson

I don't know if it is by design or a bug but I can confirm this is a real problem. One other thing to be aware of is that if the user has the option to save passwords enabled, any site that requires a login will fail because that prompt is also blocked. (you can try this with a simple form with a username and password box and nothing else and it simply won't submit). There are workarounds though for all three issues.

我不知道这是设计使然还是错误,但我可以确认这是一个真正的问题。需要注意的另一件事是,如果用户可以选择保存密码,则任何需要登录的站点都将失败,因为该提示也被阻止。(您可以使用带有用户名和密码框的简单表单来尝试此操作,而没有其他任何内容,它根本不会提交)。但是对于所有三个问题都有解决方法。

  1. Login - set autocomplete="off" in the form tag for the site, or detect that the site is running IOS7 and in fullscreen mode and apply this setting

    $('form').attr('autocomplete', 'off');
    
  2. Alerts and Confirms - you can either write a custom function in JavaScript or override the existing functions in much the same way as here: http://andrewensley.com/2012/07/override-alert-with-jquery-ui-dialog/. I like using Eric Martin's SimpleModal plugin which has a built in Confirm override, the bottom demo on http://www.ericmmartin.com/projects/simplemodal-demos/.

  1. 登录 - 在网站的表单标签中设置 autocomplete="off",或者检测该网站正在运行 IOS7 和全屏模式并应用此设置

    $('form').attr('autocomplete', 'off');
    
  2. 警报和确认 - 您可以在 JavaScript 中编写自定义函数或以与此处大致相同的方式覆盖现有函数:http: //andrewensley.com/2012/07/override-alert-with-jquery-ui-dialog/. 我喜欢使用 Eric Martin 的 SimpleModal 插件,它具有内置的 Confirm 覆盖,位于http://www.ericmmartin.com/projects/simplemodal-demos/上的底部演示。

I hope some of that helps.

我希望其中一些有所帮助。

回答by Marco Allori

I solved with a setTimeout

我用 setTimeout 解决了

<select onchange="setTimeout(function(){alert('not broken!');},200)">
                <option value="one">One</option>
                <option value="two">Two</option>
            </select>

http://jsbin.com/iPuXiVA/4/

http://jsbin.com/iPuXiVA/4/

Anyway, seems this bug afflicts the iPad and not the iPhone.

无论如何,似乎这个错误影响了 iPad 而不是 iPhone。

回答by DaNnY BoY

Andersen is correct:

安徒生是对的:

javascript alert() and confirm() bugs fixed as of iOS7.0.3

从 iOS7.0.3 开始修复了 javascript alert() 和 confirm() 错误

just installed and tested it myself.

刚刚安装并自己测试。

While Apple was fixing the issue, I scrambled to find something to work around it, and ended up finding a js plugin called Alertify that I thought this was worthwhile to share. I think I'll use it from now on, regardless of the bug fix! It just makes alerts, prompts etc look really, really good. Thought it was worth sharing since readers of this post are likely using the standard browser alerts. I was stoked to stumble across it.

当 Apple 正在解决这个问题时,我急忙寻找解决方法,最终找到了一个名为 Alertify 的 js 插件,我认为这值得分享。我想我会从现在开始使用它,无论错误修复如何!它只是让警报、提示等看起来非常非常好。认为值得分享,因为这篇文章的读者可能使用标准浏览器警报。我被它绊倒了。

回答by Pic Mickael

I had this happening for me with the following code:

我使用以下代码发生了这种情况:

const confirmation = window.confirm(message || 'Are you sure?');

The confirm would show up on PC (Edge browser), but not on iPhone (Safari browser)

确认会显示在 PC(Edge 浏览器)上,但不会显示在 iPhone(Safari 浏览器)上

I changed the code to the following (removed the window.):

我将代码更改为以下内容(删除了窗口。):

const confirmation = confirm(message || 'Are you sure?');

And suddenly it was working again.

突然它又开始工作了。

I am guessing that Apple got its own implementation of confirmthat does not need the window.

我猜苹果有自己的确认实现,不需要窗口。

回答by Boris

I think that a bug related to the smooth hiding selection boxes animation. I do not like hacks, but this method works. Confirming called after 100 ms (this is enough for the time until the selection window closes)

我认为与平滑隐藏选择框动画有关的错误。我不喜欢黑客,但这种方法有效。确认在 100 毫秒后调用(这对于选择窗口关闭之前的时间来说已经足够了)

var object;

$('form select').change(function()
{
    object = $(this);
    timer = setTimeout(confirmation, 100);
});

function confirmation()
{
    switch(object.val())
    {
        case 'post_approved':
        case 'post_delete':
        case 'thread_delete': object.parent('form').find('input[name=id]').val(object.parent('form').find('input[name=post_id]').val()); break;
        case 'user_delete_all': object.parent('form').find('input[name=id]').val(object.parent('form').find('input[name=user_id]').val()); break;
        default: return false; break;
    }

    if(object.parent('form').find('input[name=act]').val() === 'post_approved'  || (object.parent('form').find('input[name=act]').val() != '' && confirm('Вы уверены?')))
        object.parent('form').submit();
    else
        return false;
}