romich
@romich
Frontend разработчик

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

Доброго времени суток. Есть два файла JS. В одном при нажатии на кнопку всплывает окно. В окне находится калькулятор, который написан через прототип и размещено отдельно во втором файле. Вопрос, как мне по нажатию на кнопку осуществить выполнение функции из второго файла, или же просто заново инициализировать скрипт, чтобы он все пересчитал? И чтобы при нажатии на кнопку всегда было выполнение второго файла?
  • Вопрос задан
  • 783 просмотра
Решения вопроса 1
lazalu68
@lazalu68
Salmon
В подавляющем большинстве случаев надобность в реинициализации целого скрипта свидетельствует о недостатках выбранной архитектуры, т.к. вместо этого гораздо проще выделять процедуры, ответственные за инициализацию, и выполнять их.

Окна/фреймы взаимодействуют между собой через объекты Window: для доступа к дочернему окну родительское может использовать ссылку которую возвращает метод open ("var child_window = window.open()"), а дочернее может обращаться к родительскому используя свойство opener. Доступ к свойствам есть только у окон принадлежащих одному источнику (origin): если окно с адресом "first.com/page.html" вызовет окно с адресом "second.com/page.html", то оно не будет иметь доступа к его свойствам, а если с адресом "first.com/folder/another-page.html" - то будет.

Окна/фреймы одного источника могут почти без ограничений обращаться к свойствам друг друга - могут использовать данные, выполнять функции, производить операции с элементами. Достаточно объявить в одном окне функцию, и она сразу станет доступна для дочернего/родительского окна.

Также взаимодействие можно осуществлять с помощью метода Window.postMessage (MDN, JSR), который к тому же позволяет реализовать кроссдоменный обмен данными. В IE8+ этот метод 1) работает только для фреймов, 2) позволяет передавать только строки.

Каждый способ имеет преимущества и недостатки: обращение к свойствам другого окна разрешено только в рамках одного источника, а использование postMessage в случаях с более-менее сложными интерфейсами сводится к передаче кастомных ивентов.

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

Код обоих примеров можно увидеть на гитхабе
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
ShadowOfCasper
@ShadowOfCasper
Middle User Interface Web Developer
Скрипт в отдельном файле заворачиваем в функцию, после функции пишем module.exports = functionName.
После сией несложной процедуры во второй файл (в котором нужно инициализировать первый) пишем в нужном месте functionName = require('./path/to/functionName') и вызываем functionName(). Как и в любую другую функцию можно передавать параметры в виде аргументов.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы