Chrome: JS загружается до HTML - PullRequest
Новая
       2

Chrome: JS загружается до HTML

0 голосов
/ 05 ноября 2018

Я изучаю Javascript и меня очень смущает вопрос, почему у меня возникают проблемы с загрузкой моего javascript перед HTML при использовании Chrome. Когда я использую Firefox и Edge, страница сначала загружается с html, а затем я получаю предупреждение. Когда я использую Chrome, я сначала получаю предупреждение, а фон остается пустым. Все, что я узнал до сих пор, похоже, говорит о том, что js-скрипт должен запускаться после html, потому что он находится внизу тега body.

Спасибо!

home.html page 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>
</head>
<body>
<h1>Hi, testing chrome.</h1>
<h2>Is this working?</h2>
<ul>
<li>list1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
<script type="text/javascript" src="myjs.js"></script>
</body>
</html>

myjs.js page 

alert("Am I working right?");

Ответы [ 7 ]

0 голосов
/ 05 ноября 2018

Функция DOMContentLoaded позволяет браузеру выполнять код javascript после загрузки содержимого HTML 

  document.addEventListener("DOMContentLoaded", function(event) { 
    /*it is verry easy now, you can write code here which will be executed when the 
     html content will end loading*/
  });
0 голосов
/ 05 ноября 2018

Сеть использует управляемую событиями модель для последовательности действий. Вы правы, предполагая, что если сценарий появится в конце документа, он будет проанализирован позже, чем если бы он появился в начале. Но спецификация HTML не указывает явно, что HTML должен быть представлен перед выполнением вашего скрипта. Таким образом, синтаксический анализ и рендеринг - это разные операции, и Chrome может выбрать выполнение скрипта, как только он завершит его синтаксический анализ.

Так как вы можете правильно упорядочить свои действия? Сеть в целом и javascript, в частности, ориентированы на события. Ваш код может прослушивать различные события и отвечать на них, как вам угодно. В этом случае вы хотите выполнить ваш скрипт после загрузки документа. Взгляните на событие DOMContentLoaded.

Вот ваш код, измененный для запуска при возникновении события DOMContentLoaded. 

document.addEventListener("DOMContentLoaded", function() {
  alert("Am I working right?");
});

Я просто включил ваш вызов функции оповещения в свою функцию обработчика событий. Функция обработчика события (или обратного вызова) должна быть зарегистрирована на элементе, который генерирует событие, в нашем случае, объект document. Это делается путем вызова addEventListener() для этого объекта с двумя аргументами. Первое - это имя события, которое мы хотим прослушать как строку, а второе - это функция, которая должна выполняться при запуске события.

Существует множество событий, определенных для множества различных элементов, и вы даже можете определить свои собственные пользовательские события и ответить на них.

0 голосов
/ 05 ноября 2018

В простом JavaScript, попробуйте это в myjs.js 

$(window).on("load", function(){
    var ss = document.createElement("script");
    ss.src = "myjs.js";
    ss.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(ss);
});

ELSE

Попробуйте, если загружен jQuery. 

$(function() {
    alert("Am I wrong?");
});

Вам нужно будет добавить 

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js">

в теге для включения jQuery

Это должно убедиться, что страница загружена. Но учтите, что тег также является частью DOM

Если требуется выполнить внешний JS после загрузки HTML, вы можете попробовать это. 

$(function() {
    var ss = document.createElement("script");
    ss.src = "myjs.js";
    ss.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(ss);
});
0 голосов
/ 05 ноября 2018

Поместите код в документ готового метода Jquery

0 голосов
/ 05 ноября 2018

Если вы хотите, чтобы ваш html был загружен до js, обязательно оберните его 

document.addEventListener("DOMContentLoaded", function(event) { 
  // your code here
});
0 голосов
/ 05 ноября 2018

Поскольку JavaScript является однопоточным, поэтому при вызове функции alert () он блокирует другое выполнение, потому что это функция блокировки пользовательского интерфейса.

0 голосов
/ 05 ноября 2018

Что-то, что вы должны всегда делать в файлах JS, - это помещать каждый прямой код и функции, связанные с DOM, в функцию, ожидающую загрузки страницы.

В простом JavaScript: 

window.onload = function() {
    //Your JS here
};

Обратите внимание, что согласно этой записи , вы можете использовать document.onload(function() {...});

С JQuery: 

$(function() {
    //Your JS here
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...