Подключить файл js к html: Внешние скрипты, порядок исполнения

Содержание

Подключение файлов | HTML: Препроцессор Pug

Преимущество Pug перед простым HTML — возможность подключения файлов. Представьте проект, состоящий из пяти статических страниц. Некоторые сайты, при таком объёме, не используют CMS или другие серверные решения, которые будут управлять шаблоном сайта. Во-первых, это быстрее, так как нет дополнительной обработки, во-вторых, это снижает порог входа в проект.

У статического решения есть одна глобальная проблема — переиспользование повторяющихся HTML-блоков. Чаще всего это футер, шапка, меню, баннеры и так далее. Копировать HTML — не лучшее решение, так как рано или поздно это приведёт к различиям в блоках.

В этой ситуации на помощь приходит Pug. Он позволяет создать отдельные файлы для повторяющихся элементов и подключать их внутрь любого файла. Как будет рассмотрено в уроке, это может быть не только разметка, но и любые данные, вплоть до интерпретации других файлов, таких как Markdown.

Для примера создадим несколько Pug-файлов с разметкой шапки и футера:

//- includes/header. pug
header
  a.logo(href='#') Хекслет
  nav
    a(href='/programs') Программы
    a(href='/courses') Курсы
    a(href='/pricing') Цены
    a(href='/teams') Компаниям

//- includes/footer.pug
footer
  p Hexlet Ltd.

Эти файлы можно включать внутрь любых других Pug-файлов используя конструкцию include и указав путь к подключаемому файлу.

//- index.pug
doctype html
html
  head
    meta(charset='UTF-8')
    meta(name='viewport' content='width=device-width, initial-scale=1.0')
    meta(rel='icon' type='image/x-icon' href='favicon.ico')

    title Hexlet

    link(rel='stylesheet' href='./styles/app.css')
  body
    //- Подключение шапки сайта
    include includes/header.pug

    main
      h2 Научитесь программировать и получите востребованную профессию

    //- Подключение футера сайта
    include includes/footer.pug

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta rel="icon" type="image/x-icon" href="favicon.ico">
    <title>Hexlet</title>
    <link rel="stylesheet" href="./styles/app.css">
  </head>
  <body>
    <header>
      <a href="#">Хекслет</a>
      <nav>
        <a href="/programs">Программы</a>
        <a href="/courses">Курсы</a>
        <a href="/pricing">Цены</a>
        <a href="/teams">Компаниям</a>
      </nav>
    </header>
    <main>
      <h2>Научитесь программировать и получите востребованную профессию</h2>
    </main>
    <footer>
      <p>Hexlet Ltd.</p>
    </footer>
  </body>
</html>

Pug позволяет подключать любой тип файла. Логика достаточно проста — данные любого подключенного файла будут вставлены «как есть». Таким образом можно подключить не только шаблоны с синтаксисом Pug, но и скрипты, CSS код, текстовые данные.

/* Basis Styles */
* {
  box-sizing: border-box;

  margin: 0;
  padding: 0;
}

h2,
h3,
h4 {
  color: #666;
  font: 2em/1.5 'Headers', sans-serif;
}

doctype html
html
  head
    meta(charset='UTF-8')
    meta(name='viewport' content='width=device-width, initial-scale=1.0')
    meta(rel='icon' type='image/x-icon' href='favicon.ico')

    title Hexlet

    style
      include styles/basis.css

    link(rel='stylesheet' href='./styles/app.css')

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta rel="icon" type="image/x-icon" href="favicon.ico">
    <title>Hexlet</title>
    <style>
      * {
        box-sizing: border-box;

        margin: 0;
        padding: 0;
      }

      h2,
      h3,
      h4 {
        color: #666;
        font: 2em/1.5 'Headers', sans-serif;
      }
    </style>
    <link rel="stylesheet" href="./styles/app.css">
  </head>
</html>

Дополнительные модули

При работе с Pug можно пользоваться не только встроенными возможностями, но и расширять их другими обработчиками. Это достигается за счёт взаимодействия с jstransformer.

В качестве примера используем распространённую задачу по добавлению файлов формата markdown в разметку. Markdown — язык разметки текстов, который может преобразовываться в HTML. Такой способ записи текстов облегчает их прочтение и даёт возможность правильно размечать тексты людям, которые далеки от вёрстки.

Преобразуем следующий текст:

# Hexlet. Научитесь программировать и получите востребованную профессию

Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.

Выбирайте Хекслет, если вы:

* Хотите научиться программировать, но не знакомы с разработкой
* Хотите получить новую профессию
* Хотите развиваться

## Как проходит обучение

Вы выбираете профессию, мы подбираем для вас индивидуального наставника. Это действующий программист с опытом преподавания. Обучение программированию в рамках профессии объединяется в четыре модуля. Каждый модуль состоит из тематических курсов и практического проекта.

Интересно: на Хекслете тексты для курсов пишутся именно в формате Markdown, а потом автоматически переводятся в HTML-разметку при их загрузке на сервер.

Для преобразования Markdown в HTML в препроцессоре Pug используется пакет jstransformer-markdown-it. Его можно установить командой

npm install jstransformer-markdown-it

Для подключения модуля используется синтаксис :название-модуля. Всё, что находится внутри модуля, будет обработано скриптом.

main
  :markdown-it
    # Hexlet. Научитесь программировать и получите востребованную профессию

    Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.

    Выбирайте Хекслет, если вы:

    * Хотите научиться программировать, но не знакомы с разработкой
    * Хотите получить новую профессию
    * Хотите развиваться

    ## Как проходит обучение

    Вы выбираете профессию, мы подбираем для вас индивидуального наставника. Это действующий программист с опытом преподавания. Обучение программированию в рамках профессии объединяется в четыре модуля. Каждый модуль состоит из тематических курсов и практического проекта.

<main>
  <h2>Hexlet. Научитесь программировать и получите востребованную профессию</h2>
  <p>Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p>
  <p>Выбирайте Хекслет, если вы:</p>
  <ul>
    <li>Хотите научиться программировать, но не знакомы с разработкой</li>
    <li>Хотите получить новую профессию</li>
    <li>Хотите развиваться</li>
  </ul>
  <h3>Как проходит обучение</h3>
  <p>Вы выбираете профессию, мы подбираем для вас индивидуального наставника. Это действующий программист с опытом преподавания. Обучение программированию в рамках профессии объединяется в четыре модуля. Каждый модуль состоит из тематических курсов и практического проекта.</p>
</main>

Важно: я специально аккуратно форматирую итоговый HTML-код для удобного чтения во время урока. Повторяя шаги из урока, Pug может выдать вам немного другое форматирование. Это не страшно и не является ошибкой.

Внутрь модулей так же можно передавать файл для подключения. Это приоритетный вариант, так как лучше не иметь текст внутри Pug файлов, а хранить их отдельно. Это большая тема, посвящённая архитектуре приложений, но старайтесь разделять текст и его вывод. Чем меньше текста содержится в Pug, тем проще с ним работать.

Для подключения файла к модулю используется та же конструкция include, после которой указывается название модуля и файл для подключения.

main
  include:markdown-it main.md

Дополнительное задание

Создайте базовую разметку HTML страницы с использованием Pug и добавьте следующий текст в формате markdown:

# О Хекслете

Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.

## Идея и мотивация

Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.

При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.

Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. Каждый урок на Хекслете включает в себя до трех шагов:

1. **Теория**. Короткая лекция в виде текста или видео. Она основана на задаче, так что в отличие от традиционной академической теории, мы делаем упор на специфическую задачу, которая уже решена умными инженерами и программистами, а затем следуем по их шагам, чтобы понять решение.

Как встроить в HTML код страницы JS-скрипты?

Подключение JavaScript в HTML код

Есть два способа вызова JavaScript в HTML-коде страницы:

  1. [html]<script type=’text/javascript’ src=’путь_к_скрипту’></script>[/html]

  2. [html]<script type=’text/javascript’>код_скрипта</script>[/html]

Первый способ подключает js-файл, который может быть расположен как в одной из директорий сайта, так и на другом ресурсе. Второй способ встраивает код js-файла в HTML-код страницы. Тут стоит разобраться в том, что использование того или другого метода должно зависеть от объема js-скрипта. Если объем скрипта достаточно большой, то лучше будет вызвать его из файла. Кроме этого, большие по объему скрипты можно оптимизировать, ознакомившись со статьей как сжать JS-скрипты. Но если же весь код скрипта заключен в несколько строчек, то встраивание JavaScript в HTML код страницы будет более правильным. Встраивание небольшого по размеру js-кода лишает сервер необходимости запрашивать этот самый файл, что в свою очередь уменьшит задержки при загрузке других ресурсов и сократит время обработки страницы.

Какие по объему JS-скрипты необходимо встраивать в HTML код?

Хорошей подсказкой для встраивания JavaScript может послужить Page Speed от Google. Данный инструмент подскажет вебмастеру какие .js и .css-файлы должны быть встроены в HTML код страницы.

Что делать с JS-скриптами, которые вызываются с других сайтов?

Со скриптами, которые вызываются из других сайтов, можно провернуть следующие действия:

  1. Находите их и копируете их код.
  2. Создаете в текстовом редакторе аналогичный js-скрипт.
  3. Заливаете его в корневую(или в любую другую) директорию своего сайта.
  4. Изменяете путь вызова js-скрипта на адрес, по которому расположился Ваш скрипт.

В основном проблемы могут возникнуть с 4-ым пунктом. В статье «Как встроить небольшой css-файл в HTML-код страницы» я описал алгоритм, с помощью которого в CMS WordPress можно найти место вызова стиля и изменить его, встроив вместо него небольшой css-файл. Данный алгоритм вполне подойдет и для js-файлов.

Где лучше подключить JavaScript?

JavaScript лучше всего подключить в футере(footer) страницы. Разместив js-скрипт в начале(head) или середине(body) страницы, Вы приостановите загрузку страницы на время выполнения данного скрипта. Если же скрипт будет размещен в конце страницы и будет выполняться только после загрузки основного содержимого страницы, пользователи смогут быстрее начать изучать материал. Ну, а скрипты подтянуться позднее. К тому же, желательно скрипты загружать после css-файлов. Почему после, а не до стилей, читайте в статье Оптимизация порядка загрузки стилей и скриптов, в которой этот момент подробно рассмотрен.

Подключение стилей и скриптов

Для подключения стоит использовать внутренний функционал платформы для склеивания файлов.

Для стилей нужно пользоваться директивой препроцессора sass — @import или внутренней директивой #= require

Пример plugins.css:

#= require jquery.min
#= require magiczoomplus.min
#= require normalize.min
#= require swiper.min
#= require alertify.min
#= require magnific-popup.min

Пример main.scss:

@import 'header';
@import 'footer';
@import 'slider';

Важно! Файлы header, footer, slider могут быть как scss так и css.

Используя @import и #= require можно игнорировать расширение.

Для удобности в файлы относящиеся к main.scss именуют с префиксом _, при импорте префикс игнорируется.

main.scss компилируется в main.css, в тему подключается скомпилированный или склеенный main.scss.

Подключение js происходит аналогично, только используется директива #= require.

Js файлы так же разделяются на два файла plugins и main.

Пример main.js:

#= require cart
#= require product
#= require collection

Подключение скриптов и стилей разделяется сниппетами, сниппет для стилей styles.liquid для скриптов scripts.liquid.

Сниппеты подключаются в главный лэйаут layouts.layout.liquid.

Пример layouts.layout.liquid:


<!DOCTYPE html>
<html>

<head>

  {% include 'head' %}

  {% include 'styles' %}

</head>
<body>

<div>

  <div>

    {% include 'header' %}

    {{ content_for_layout }}

  </div>

  {% include 'footer' %}

</div>

  {% include 'modals' %}

  {% include 'scripts' %}

</body>
</html>

Содержимое styles.liquid:

<link rel="stylesheet" href="{{ 'plugins.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'main.css' | asset_url }}">

Содержимое scripts.liquid:

<script type="text/javascript" src="{{ 'plugins.js' | asset_url }}"></script>
<script type="text/javascript" src="{{ 'main.js' | asset_url }}"></script>

Как подгрузить HTML-код из файла силами JavaScript на web-страницу через объект XMLHttpRequest?

Оглавление

Вводные данные

Есть два файла на сервере:

Файл index.html обрабатывается силами web-сервера и автоматически загружается в браузер пользователя при обращении к сайту (главной странице).

Файл index.html имеет классическую разметку документа:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Документ</title>
</head>
<body>
</body>
</html>

Пустой HTML-документ | Базовая разметка

Это «пустая» HTML-страница со своим уникальным адресом. На странице визуально нет ничего. Просто белый лист.

Задача

Необходимо на страницу index.html подключить HTML-разметку из файла text.html, но так чтобы файл text.html содержал только HTML-элементы <h2> и <p>. То есть мы хотим подгрузить только уникальную информацию на страницу без «лишних» мета-данных.

Также мы хотим сделать эту загрузку в фоне, без перезагрузки страницы index.html. То есть пользователь не увидит в адресной строке браузера другого адреса. Перезагрузки страницы не будет.

Файл text.html имеет разметку:

<h2>Содержимое файла «text.html»</h2>

<p>Меня зовут ТЕКСТ АБЗАЦЕВИЧ. Я пришёл из файла «text.html». Я живу в HTML-элементе «p».</p>

Содержимое файла text.html

ВНИМАНИЕ! Запросы к серверу мы будем делать ТОЛЬКО через работающий локально веб-сервер. Ознакомьтесь с протоколом CORS и стандартом Fetch. Локальный запуск файла index.html в браузере не приведёт к работающему результату. Используйте бесплатный продукт «OpenServer» для своих тестов.

Предпосылки. Зачем это нужно?

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

Каждая отдельная страница сайта перестаёт быть статичной (уже собранной). В результате, мы разделяем потенциальную страницу на части. Например:

  • Один документ отвечает за шапку сайта
  • Другой за подвал
  • Третий за основное содержимое
  • Четвёртый за боковые панели
  • Пятый за рекламные баннеры
  • Шестой за галерею фотографий
  • Седьмой за контактную информацию
  • и т. п..

Решение задачи

Для начала подключим на страницу index.html файл со скриптом, который будет называться gettext.js.

В файле index.html внутри элемента <head> поместим элемент <script> с атрибутом src и его значением gettext.js

<script src=«gettext.js»></script>

Подключение файла скрипта на HTML-страницу

Для решения задачи мы будем использовать объект XMLHttpRequest. Стандарт XMLHttpRequest определяет API-интерфейс, который предоставляет клиенту функциональные возможности по сценарию для передачи данных между клиентом и сервером.

Логика работы такая:

  1. Посылаем запрос на сервер.
  2. Дожидаемся ответа. Ловим содержимое файла.
  3. Вносим нужные изменения в документ.

Отредактируем файл gettext.js

var inBody = function(){            // Создаём анонимную функцию. Помещаем её в переменную "inBody"
   var xhr = new XMLHttpRequest()  // Создаём локальную переменную XHR, которая будет объектом XMLHttpRequest
   xhr.open('GET', 'text.html')     // Задаём метод запроса и URL  запроса
   xhr.onload = function(){        // Используем обработчик событий onload, чтобы поймать ответ сервера XMLHttpRequest
      console.log(xhr.response)           // Выводим в консоль содержимое ответа сервера. Это строка!
      document.body.innerHTML = xhr.response  // Содержимое ответа, помещаем внутрь элемент "body" 
   }
   xhr.send()  // Инициирует запрос. Посылаем запрос на сервер.
}
inBody()    // Запускаем выполнение функции получения содержимого файла

Объект XMLHttpRequest | Получение HTML-разметки из файла

Логика работы объекта XMLHttpRequest

В первой строке мы создаём анонимную функцию и помещаем её в переменную «inBody«. Название переменной описывает решаемую задачу — дословно «вТело«. То есть результатом выполнения этой функции будет интеграция содержимого файла text.html внутрь элемента <body> загруженной странице index.html на клиенте (в браузере)

Со второй строки начинается тело функции. С помощью конструктора объектов мы создаём новый объект XMLHttpRequest и помещаем его в локальную переменную «xhr«. Название переменной означает сокращённую запись от первых трёх букв — XMLHttpRequest (XHR). Т.к. область видимости ограничена родительской функцией, то можно использовать подобное название без опасений. В рабочих проектах не рекомендую использовать глобальные переменные с именем XHR, т. к. на практике такое имя применяется в основном к объектам XMLHttpRequest.

Третья строка запускает метод open() объекта XMLHttpRequest. В этом методе задаётся HTTP-метод запроса и URL-адрес запроса. В нашем случае мы хотим получить содержимое файла по адресу «text.html», который находится в той же директории, что и загруженный в браузер index.html. Получать содержимое мы будем методом «GET» протокола HTTP.

Четвёртая строка описывает логику работы обработчика события onload. Пользовательский агент ДОЛЖЕН отправить событие load, когда реализация DOM завершит загрузку ресурса (такого как документ) и любых зависимых ресурсов (таких как изображения, таблицы стилей или сценарии). То есть обработчиком события onload мы ловим срабатывание типа события load и полученные ресурсы мы достаём при помощи атрибута ответа response объекта XMLHttpRequest.

Пятой строкой мы выводим в консоль результат ответа сервера. Она необходима для разработки. Она не обязательна. ВНИМАНИЕ! Содержимое ответа по-умолчанию имеет тип данных — string (строка). Это стандарт клиент-серверного взаимодействия. Все данные передаются по сети в виде «строковых данных». Так всегда происходит — это норма. Если вы точно знаете каким образом строка будет оформлена, тогда вы можете воспользоваться атрибутом ответа responseType и в этом случае содержимое ответа будет одним из:

  • пустая строка (по умолчанию),
  • arraybuffer
  • blob
  • document
  • json
  • text

В шестой строке мы присваиваем элементу <body> внутренне содержимое пришедшее из файла на сервере. Это содержимое будет заключено между открывающим <body> и закрывающим </body>. XMLHttpRequest имеет связанный ответ response.

Восьмая строка инициирует запрос на сервер методом send() и отправляет его.

На десятой строке мы вызываем функцию «inBody»

Результат работы

Страница с результатом работы и инструментами разработчика

Мы видим итоговую страницу с нужным нам содержимым. На favicon не обращаем внимания т. к. браузер Chrome вдруг решил его поискать.

Вкладка имеет название «Документ», которое пришло из элемента <title>.

title в разметкеtitle на вкладке

Главная страница нашего «воображаемого» сайта http://getinnerofpage/ содержит информацию, пришедшую из другого файла.

Главная страница сайта с новыми данными из другого документа

Разметка итогового документа после выполнения запроса к серверу. Браузер «переварил» строковые данные и преобразовал их в HTML-разметку.

Итоговая разметка после загрузки данных

В инструментах разработчика на вкладке Network мы видим последовательность загрузки данных для главной страницы сайта

Этапы загрузки главной страницы сайта

Сперва браузер запросил HTML-документ главной страницы сайта. Статус 200 — ОК. Потом после разбора разметки браузер загрузил файл со скриптом. Статус 200 — ОК. После этого браузер начал синхронно обрабатывать выполнение инструкций файла скрипта. На восьмой строчке выполнения файла gettext.js мы видим обращение к файлу text.html

Заголовки запроса к серверу

Статус 200 — ОК означает успешную подачу запроса — запрашиваемые ресурсы имеются на сервере.

Заголовки ответа сервера

В ответе сервера браузер уже понимает пришедшие данные и подсвечивает HTML-синтаксис, указывая на элементы <h2> и <p>. То есть браузер уже сам разобрал пришедший тип данных string и подсветил разработчику открывающиеся и закрывающиеся элементы.

Важно обратить внимание, что на подгрузку данных «в фоне» потребовалось некоторое время. В реальных проектах нужно учитывать эту особенность и правильно распределять зависимости последовательностей отдачи содержимого пользователю.

Может оказаться так, что при формировании финансового графика часть данных не успеет прийти вовремя — это исказит трактование данных из отчёта и навредит бизнесу из-за ошибки вычислений. Будьте внимательны! В таких случаях уместно использовать объект Promise.

Полезные ссылки

Стандарт XMLHttpRequest на русском языке — https://efim360.ru/xmlhttprequest/

Стандарт XMLHttpRequest на английском языке (официальная документация) — https://xhr.spec.whatwg.org

Редактор кода Visual Studio Code — https://code.visualstudio.com

Поделись записью

Как добавить JavaScript на HTML-страницы

В этом руководстве вы узнаете, как включить JavaScript в документ HTML.

Работа с клиентским скриптом

Клиентские сценарии относятся к типу компьютерных программ, которые выполняются веб-браузером пользователя. JavaScript (JS) — самый популярный язык сценариев на стороне клиента в Интернете.

Элемент

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

Вызов внешнего файла JavaScript

Вы также можете поместить свой код JavaScript в отдельный файл (с расширением .js ) и вызвать этот файл в своем HTML-документе с помощью атрибута src тега

Примечание: Если указан атрибут src , элемент , как встроенный JavaScript.

Элемент HTML noscript

Элемент

Этот элемент может содержать любые элементы HTML, кроме

Ой! Для этого веб-сайта требуется браузер с поддержкой JavaScript.

Примечание: Содержимое внутри элемента noscript будет отображаться только в том случае, если браузер пользователя не поддерживает сценарии или сценарии отключены в браузере.

Как загрузить внешние файлы JavaScript из консоли браузера | автор Dr.Дерек Остин 🥳

Как я уже упоминал ранее, eval () имеет риски безопасности, связанные с ним, как хорошо объясняется в документации MDN:

« eval () - опасная функция, которая выполняет код, который она выполняет. прошел с привилегиями звонящего. Если вы запустите eval () со строкой, на которую может воздействовать злоумышленник, вы можете запустить вредоносный код на компьютере пользователя с разрешениями вашей веб-страницы / расширения. Что еще более важно, сторонний код может видеть область, в которой была вызвана eval () , что может привести к возможным атакам, которым не подвержена аналогичная функция Function .”- MDN Docs

Проще говоря, вы должны использовать Function () вместо eval () - но обычно используется eval () , поэтому не удивляйтесь, если вы увидите это повсюду.

Использование Function () будет выглядеть как следующий пример кода:

Просмотрите исходный код как GitHub gist

С точки зрения синтаксиса нет никакой разницы - просто замените Function () на eval () .

Но использование Function () повысит безопасность и производительность вашего веб-сайта или приложения, даже при простой загрузке внешней библиотеки из консоли разработчика.

“ Function () Создает новый объект Function . Вызов конструктора напрямую может создавать функции динамически, но страдает от проблем безопасности и аналогичных (но гораздо менее значительных) проблем производительности с eval . Однако, в отличие от eval, конструктор Function создает функции, которые выполняются только в глобальной области ». - MDN Docs

Я должен добавить вам предостережение, что я считаю, что eval () иногда работает для меня, когда Function () не работает - например, Function () кажется заблокированным на некоторых веб-сайтах, где eval () не заблокирован по какой-либо причине.

Обычно appendChild () загружает скрипт нормально и является предпочтительным методом - с большей производительностью и меньшим риском безопасности.

Если вы сами попробуете примеры кода с помощью jQuery, имейте в виду, что существует встроенный метод знака доллара $ () , который jQuery перезапишет.

Ссылка html на файл js

  1. На главную
  2. Ссылка HTML на файл js

Тип фильтра: За все время Последние 24 часа Прошлая неделя Прошлый месяц

Listing Results Link html to js file

Javascript How To HTML Link to External Js File Stack

1 hours ago HTML и CSS работают нормально, но я не могу найти ссылку javascript файл .Я не уверен, почему, любая помощь будет оценена по достоинству. Также вот код, связывающий мой js файл с HTML .

Отзывы: 5