0 голосов
 
680 просмотров
18.03.2021 / 12:00  wRadchuk

Как внедрить JS код на страницу?

HTML JS Сетевой запрос
Итак. Делаю сетевой запрос. Прилетает ответ который содержит стиль, размётку и js код:
  1. <style>...</style>
  2. <iframe...></iframe>
  3. <button id='btn' onclick='test()'>Жми...</button>
  4. <script>
  5. function test() {
  6. console.log('Я ответ!')
  7. }
  8. </script>

Добавляю всё это дело так:
  1. <script>
  2. ...Код запроса...
  3. let ответ = что пришло с запроса описано выше...
  4. document.body.innerHTML += ответ;
  5. </script>

На странице появляется кнопка и фрейм, работают стили для них, но при нажатии на кнопку не видет функцию test(). Тоесть js код с функцией был добавлен на страницу, но для кнопки его не существует. Есть предложения как js кодом внедрить js код на страницу другим путём. Мне нужно добиться его исполнения. Заранее спасибо!


З.Ы. Клиент и сервер принадлежат мне так что можно менять как запрос, так и ответ на него.
Изм. aNNiMON от 27.03.2021 / 22:52
Ответы
 
1 голос
 
# 19.03.2021 / 11:19  Tygrain
Я возможно не понял вопроса, в чем проблема сделать как-то так?

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <head>
  6.   <title>Заголовок</title>
  7.   <script type="text/javascript">
  8.   fetch('./response.json', {
  9.     method: 'GET'
  10.   }).then(res => res.json()).then((data) => {
  11.     document.querySelector('#content').innerHTML = data.html;
  12.     eval(data.code);
  13.   });
  14.   </script>
  15. </head>
  16.  
  17. <body>
  18.   <div id="content">
  19.   </div>
  20. </body>
  21. </html>
response.json
  1. {
  2.   "code": "document.querySelector('button').addEventListener('click', () => document.querySelector('#show').append('click'))",
  3.   "html": "<button>click</button><div id=\"show\"></div>"
  4. }
Изм. Tygrain от 19.03.2021 / 11:20
19.03.2021 / 21:11  web_demon
Можно ещё создать новый тег Javascript и присоединить его к документу и он выполнится.

Но проблема не обойти - проблема в изначальной задаче. Водителю можно в машину и из багажника попасть, не додумавшись залезть через дверь. Это даже относительно безопасно, но по каким-то неведомым причинам никто так не делает, да и сразу возникает вопрос - откуда у такого водителя права.
20.03.2021 / 13:47  wRadchuk
# Вчера, 12:19 Tygrain

Да я успешно делаю запрос и могу вернуть что угодно. Проблемма в том что я не могу запустить код js полученный с ответа сервера. Сейчас же проблема решена. Храню этот код на клиенте, а с сервера лиш присылаю html которым этот код на клиенте может управлять.
20.03.2021 / 16:13  Tygrain
Я не понимаю, как именно ты хотел запустить код с сервера?
21.03.2021 / 23:48  wRadchuk
Tygrain, я сам не понимаю. Искал решение. Думаю есть варианты загрузки кода с сервера в клиент, но я пошел другим путём. Цель была в уменьшении кода который хранится на клиенте изначально, но так как код для управления контентом не такой уж и большой, то решил хранить его на клиенте с кодом запроса. Запрс пригоняет то чем может правлять внедрённый код - контент собственно. А контентом является кнопка и фрейм появляющийся по нажатию на кнопку. Остольное уже настроено в фрейме индивидуально под са
 
1 голос
 
# 18.03.2021 / 19:43  web_demon
Из документации:
HTML5 указывает на тег <script> вставленный через InnerHTM должен не выполнится.
В общем не надо искать способ это обойти, нужно вообще поменять подход к получению данных с сервера, и не получать их в html.
Изм. web_demon от 18.03.2021 / 19:47
18.03.2021 / 20:13  wRadchuk
Спасибо. Мне нужно было передавать код обработки формы с сервера и вместе с ним и саму форму. Клиент должен делать только запрос. Но видимо этот код придется писать на клиенте.
Всего: 2

Реклама

Мы в соцсетях

tw tg yt gt