Question

我在Google Chrome中加载JavaScript时遇到问题。
我使用简单的警报消息创建了单独的js文件，然后在body标记结束之前将其链接起来。
谷歌浏览器首先会显示警告框，然后点击“确定”状态。内容已加载。
在其他浏览器中它工作正常，我的意思是警报框同时显示网页的内容。
简而言之，即使我将脚本标记放在body标记的末尾之前，Google Chrome也会先加载javascript。

＆＃13;

alert("Hello World!");

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Write Your First Program</title>
    <!-- Bootstrap Core CSS -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
     <link href="css/styles.css" rel="stylesheet">

</head>
<body>
    <!-- Header -->
     <header class="header">
        <div class="text-vertical-center">
            <h1>Write Your First Program</h1>
            <h3>JavaScript Essentials</h3>
            <br>
        </div>
    </header>

<script src="js/scripts.js"></script>
</body>
</html>

＆＃13;

你知道如何解决这个问题吗？非常感谢

Answer 1

您的问题是您的脚本有标记async，它可以执行whitout来处理网页加载状态。删除async标记，或将其替换为defer，在页面加载后执行脚本。

为了防止脚本和html / css加载时间冲突出现任何问题，您应该使用window.onload = function() { //code here }封装 Javascript 的脚本。这将保证在执行代码之前加载整个页面。

Answer 2

那是Chrome的问题。 chrome的开发者由于某种原因仍未纠正该问题。如果您有警报或提示弹出窗口，这是用户在您的网站上必须与之交互的第一件事，则在关闭弹出窗口之前，chrome不会加载HTML。

Answer 3

尝试将jquery CDN包含在正文脚本标记上方。

<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous">
</script>

这会很好！

Answer 4

我也遇到了这个问题，并意识到我的Google chrome正在加载页面的缓存版本（将我的脚本标签放在底部附近的页面）。关闭窗口并重新打开页面可以正常工作。

Answer 5

async和defer布尔属性仅在将脚本插入页面顶部时才有用。如果您将脚本放在如上所示的正文页脚中，它们将无用。

（请参阅以下文章：https://flaviocopes.com/javascript-async-defer/）。

我也面临类似的问题，并且将window.onload = funcRef;与已清除的缓存一起使用也不适用于我的Google chrome。我曾尝试通过禁用所有浏览器扩展程序来尝试所有这些操作，但徒劳无功。

我终于能够解决问题，但并没有解决，但可以达成共识-可以包含

jQuery CDN

在我体内的JavaScript脚本之前。希望这可以帮助。

即使我将脚本标记放在body标记的末尾，Google Chrome也会先加载javascript

5 个答案: