Как выбрать разные js-файлы листовки при нажатии кнопки на стороне клиента

У меня есть несколько файлов js в папке host/public/js. В моем html у меня есть список с несколькими ссылками, представляющими файлы js.

Чего я пытаюсь добиться, так это того, что при нажатии на ссылку (например, <a href = "">file1.js</a>) файл1.js (упомянутый в <head> <script src = "/js/file1.js" type = "text/javascript"></script> </head> в моем html-файле) должен использоваться для отображения карт, созданных с помощью листовки (библиотека JavaScript для интерактивных карт).

Есть ли способ создать этот инструмент «выбор файла javascript» с помощью PHP, Javascript, twig или jquery?

Возможный дубликат Динамически загружать файл JavaScript

Devsi Odedra 18.07.2019 14:05

Скрипты могут быть предварительно загружены или нет?

Ro Achterberg 18.07.2019 14:06

Что именно вы имеете в виду под "предварительно загруженным"??? извините, я новичок в этом деле :-/

geoDIY 18.07.2019 14:08

Хотя можно динамически загружать js-файлы, загрузка новых js-файлов не подходит для поставленной задачи (в основном потому, что вы не можете избавиться от скрипта после его загрузки). Ищите «СПА», чтобы найти лучшую технику для этой задачи.

Teemu 18.07.2019 14:23

@nico, ничего не зная о ваших целях, трудно посоветовать вам лучший курс действий. Под «предварительной загрузкой» я подразумеваю простое включение (<script>) сценариев в заголовок страницы (<head>). Если вам просто нужно вызвать разные функции, которые находятся в разных файлах, это может сработать, но также может быть неоптимальным. Более чистым, но более сложным способом может быть извлечение (загрузка) файлов, когда они вам нужны. Уточните, пожалуйста, ваши цели, чтобы получить более конкретный ответ.

Ro Achterberg 18.07.2019 14:30

@RoAchterberg «следует использовать для отображения/форматирования моего контента» говорит достаточно, динамическая загрузка файлов js для этого не очень хорошая идея.

Teemu 18.07.2019 14:35

Было бы сложно динамически добавлять Js для форматирования содержимого, это означало бы, что каждый файл должен быть совместим с любым другим ранее загруженным Js (может отменить то, что было отформатировано ранее). Простым решением было бы перезагрузить всю страницу с параметром (например, GET через URL-адрес), и чтобы PHP вставил правильный тег сценария на страницу.

Kaddath 18.07.2019 14:38

мои файлы js - это веб-карты (листовка). Идея состоит в том, чтобы отображать другую карту (файл js) при нажатии на ссылку.

geoDIY 18.07.2019 14:39

Да, это возможно. Что вы пробовали до сих пор, где вы застряли?

Nico Haase 19.07.2019 15:57
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
9
416
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Возможно, вы неправильно подходите к своей проблеме.

По сути, вы хотите изменить состояние своей страницы, когда что-то нажимается на этой странице. И для этого вам нужно что-то получить с вашего сервера.

Я думаю, вы должны рассмотреть это:

У вас есть только один файл javascript, который вы можете назвать application.js, который вы загружаете вместе с элементом сценария. В этом файле у вас будет весь ваш код javascript.

Когда произойдет щелчок, ваш код выполнит асинхронный запрос на получение данных с вашего сервера и соответствующим образом изменит вашу страницу.

Пример (с jQuery):

    $.ajax({
            url: url,
            jsonp: false,
            dataType: "json"
        }).done(function(data){
            processJSON(data);
        });

Полный пример здесь: http://franceimage.github.io/map/

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

Это то, что вам нужно?

Ответ принят как подходящий

Я неправильно решил свою проблему. Решение было https://api.jquery.com/jQuery.getScript/.

Я получаю свои js-скрипты асинхронно с сервера. Контейнеры (в которых рендерятся карты) перезагружаются с помощью document.getElementById('id_map_container').innerHTML = "<div id='map'></div>"; (см. обновить карту листовки: контейнер карты уже инициализирован)

В приведенном выше примере есть только одна листовка, а данные (желтые точки) извлекаются и отображаются на базовой карте.

В моем случае у меня есть много файлов js, которые нужно запросить. Таким образом, решением было jQuery.getScript( url [, success ] ), что на самом деле является сокращением и эквивалентом

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

Другие вопросы по теме