Javascript 为什么我的web应用无法在打开时重新加载_Javascript_Jquery_Ios_Safari

Javascript 为什么我的web应用无法在打开时重新加载

javascript jquery ios safari

Javascript 为什么我的web应用无法在打开时重新加载,javascript,jquery,ios,safari,Javascript,Jquery,Ios,Safari,我有一个简单的web应用程序，我想用JavaScript更新它。它实际上是从一个网站加载数据，但在这个演示中，你会看到它无法编写“Hello World”。虽然它可能不是“最佳实践”代码，但它再现了我在更复杂代码中遇到的问题如果我在iOS 11上的Safari中打开它，页面会显示“Hello World”。我可以刷新并做任何我想做的事情。但如果我将页面添加到主屏幕（应用程序图标）并清除Safari缓存，则会发生以下情况：我打开web应用程序，一切正常。但是，如果我关闭它，转到Mail并返回w

我有一个简单的web应用程序，我想用JavaScript更新它。它实际上是从一个网站加载数据，但在这个演示中，你会看到它无法编写“Hello World”。虽然它可能不是“最佳实践”代码，但它再现了我在更复杂代码中遇到的问题

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

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

此外，如果我反复关闭和打开web应用程序，它最终会崩溃

你知道这是什么问题吗

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>


$.getScript（“test.js”，function（）{update（）；}）；

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>");
}

函数更新（）{
文件。填写（“”）；
文件。填写（“”）；
文件。编写（“测试”）；
文件。填写（“”）；
文件。填写（“”）；
写下（“你好世界”）；
文件。填写（“”）；
文件。填写（“”）；
}

试试这个：

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>

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');
}


更新（）；

test.js：

<!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>

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');
}

函数更新（）{
$（document.prop（'title'，'test'）；//或document.title='test'；
$（'head'）追加（''）；
$（'head'）追加（''）；
$（'body'）.html（'Hello World'）；
}

试试这个：

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>

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');
}


更新（）；

test.js：

<!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>

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');
}

函数更新（）{
$（document.prop（'title'，'test'）；//或document.title='test'；
$（'head'）追加（''）；
$（'head'）追加（''）；
$（'body'）.html（'Hello World'）；
}

它是否向开发控制台写入了一些错误？我在系统日志中得到的是“断言失败：…libxpc.dylib”。但没有其他我可以追踪到的代码。但至少我在iPhone模拟器上有相同的行为。为什么需要jQuery呢？实际上，您所做的只是通过普通的老式vanilla JS编写文档……这是因为我想在web应用程序中重现一个问题。代码不是很有用，但是应该可以工作。它是否向开发控制台写入了一些错误？我在系统日志中得到的是“断言失败：…libxpc.dylib”。但没有其他我可以追踪到的代码。但至少我在iPhone模拟器上有相同的行为。为什么需要jQuery呢？实际上，您所做的只是通过普通的老式vanilla JS编写文档……这是因为我想在web应用程序中重现一个问题。代码不是很有用，但是应该可以用。问题是我想找出我的web应用程序失败的原因。因此，即使我的代码不是最好的，它仍然应该工作。顺便说一句，append（）也可以工作，但应用程序也失败了。看起来应用程序确实可以工作。然而，因为我对其他一些代码也有这个问题，我需要找出为什么会发生这种情况。例如，如果我在正文中添加了很多append（），它也会失败。您正在尝试再次添加脚本。我认为这个错误与它有关。我同意，但为什么它在Safari上工作，而不是作为一个web应用程序？即使在使用.append（）时也会出现此错误（在网站上出现30次）。这就是为什么我认为这没有关系。但可能是缓存本身引起了问题。如果每次打开web应用时我都可以重新加载它，我就可以解决这个问题了……如果重新加载页面而不使用缓存，请使用：location.reload（true）；问题是我想找出我的web应用程序失败的原因。因此，即使我的代码不是最好的，它仍然应该工作。顺便说一句，append（）也可以工作，但应用程序也失败了。看起来应用程序确实可以工作。然而，因为我对其他一些代码也有这个问题，我需要找出为什么会发生这种情况。例如，如果我在正文中添加了很多append（），它也会失败。您正在尝试再次添加脚本。我认为这个错误与它有关。我同意，但为什么它在Safari上工作，而不是作为一个web应用程序？即使在使用.append（）时也会出现此错误（在网站上出现30次）。这就是为什么我认为这没有关系。但可能是缓存本身引起了问题。如果每次打开web应用时我都可以重新加载它，我就可以解决这个问题了……如果重新加载页面而不使用缓存，请使用：location.reload（true）；