当使用 iOS 应用程序中嵌入的 Safari 变体时（例如，当用户单击 FB Messenger 中的链接时），JavaScript recognize() 不起作用？

Question

如果用户使用 Safari 手动导航到网站，则在我的网站上使用 iOS 版 Safari 的用户不会遇到任何问题。

但是，如果有人向他们发送了一个链接并且他们点击了该链接，则打开的伪浏览器（请问其正确名称是什么 - 是 WKWebView 吗？）会破坏该网站。大多数事情都工作正常，但如果我的网站抛出一个

confirm()

对话框，什么也不会发生 - 它不会弹出，并且用户不会得到任何出错的反馈，除了他们预期的操作没有发生。

我不清楚伪浏览器是否无法显示它，或者是否在视口之外的某个地方错误地“显示”它。

在本机 Safari 和应用内 Safari 中，我都会在手机顶部的 wifi 符号旁边看到一个由 5 个点/条从左向右移动的加载动画。在 Safari 中，当我关闭确认时就会出现，在伪 Safari 中，没有确认要关闭，并且该动画是永久的。

我该如何解决这个问题？

在搜索问题时，我找到了很多针对制作 iOS 应用程序的人的建议，告诉他们如何在应用程序内浏览器中允许

confirm()

、

alert()

和

prompt()

，但我找不到任何针对网站管理员的问答像我一样，了解如何解决我们的网站无法在这些浏览器中运行的问题。是摆脱

confirm()

并生成我自己制作的 html/css 弹出窗口的唯一选择吗？

谢谢你。

Answer 1

嘿，这是一个带有 JS 和 CSS 的确认框代码。

function confirm(question) {
    return new Promise(r => {
        const behind = document.createElement("div");
        behind.style = `
position:fixed;
width:100vw;
height:100vh;
background: rgba(0,0,0,0.6);
left:0;
top:0;
z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
`
        document.body.append(behind)
        const container = document.createElement("div");
        container.style = `
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
`
        const q = document.createElement("span");
        q.style = `
color:white;
font-size:5em;
`
        q.innerText = question;
        container.append(q)
        const ync = document.createElement("div"); //yes no container
        ync.style =
            `
    align-items: center;
    justify-content: center;
display:flex;
`
        var btn = document.createElement("span");
        btn.innerText = "Yes";
        btn.style = `
cursor:pointer;
color:white;
background:#2ebf91;
text-align:center;
padding:8% 30%;
font-size:5em;
`
        btn.onclick = function() {
            r(true);
            behind.remove();
        }
        ync.append(btn)
        btn = btn.cloneNode();
        btn.onclick = function() {
            r(false);
            behind.remove();
        }
        btn.style.background = "#ec2F4B"
        btn.innerText = "No";
        btn.style.marginLeft = "20%"
        ync.append(btn)
        container.append(ync)
        behind.append(container)
    })
}

您可以更改 CSS 或将其包含在 style / html 中，我不是 CSS 专家。

所以可能是糟糕的设计。

使用方法

console.log(await confirm("test")); // wait until click button