Question

我有一个简单的网络应用，我想用JavaScript更新。它实际上从网站加载数据，但在本演示中，您将看到它无法编写“Hello World”。虽然它可能不是“最佳实践”代码，但它可以用更复杂的代码重现我的问题。

如果我在iOS 11的Safari中打开此页面，则会显示“Hello World”。我可以刷新并做任何我想做的事。但是，如果我将页面添加到主屏幕（应用程序图标）并清理Safari缓存，则会发生以下情况：

我打开网络应用程序，一切正常。但是，如果我关闭它，转到Mail并返回到Web应用程序，它只显示一个白色屏幕 - 直到我清除Safari中的缓存......

此外，如果我反复关闭并打开网络应用程序，它最终会崩溃。

任何想法可能是什么问题？

的test.html

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $.getScript("test.js", function(){update();});</script>
    </body>
    </head>
</html>

test.js

function update() {
    document.write("<html>");
    document.write("<head>");
    document.write('<title>test</title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover"><meta name="apple-mobile-web-app-capable" content="yes">');
    document.write("</head>");
    document.write("<body>");
    document.write("Hello World");
    document.write("</body>");
    document.write("</html>");
}

Answer 1

试试这个：

<强>的test.html ：

<!DOCTYPE html>
<html>
    <head>
      <title>
      </title>
    </head>
    <body></body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="test.js"></script>
<script>
   update();
</script>

<强> test.js ：

function update() {
    $(document).prop('title', 'test');  // or document.title = 'test';
    $('head')append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover">');
    $('head')append('<meta name="apple-mobile-web-app-capable" content="yes">');
    $('body').html('Hello World');
}

为什么我的网络应用程序无法在打开时重新加载

1 个答案: