Форум

Domik941 · #1 (**permalink**) 27.12.2019, 14:26

Доброго времени суток.

Я столкнулся с необходимостью замены части HTML кода внутри div'a, но если в заменяемом коде есть <script>...</script>, то эти скрипты не выполняются. Вы не могли бы объяснить как мне быть в этой ситуации, чтобы вставленный HTML+JS код работал корректно.

Либо же мне вставляемый код разбирать по тегам, и создавать каждый из них через createElement ?

Спасибо за ответ.

ksa · #2 (**permalink**) 27.12.2019, 14:29

Domik941, пример тестовый нужно делать для иллюстрации проблемы...

рони · #3 (**permalink**) 27.12.2019, 14:44

Сообщение от Domik941

и создавать каждый из них через createElement ?

Domik941 · #4 (**permalink**) 27.12.2019, 14:46

Сообщение от ksa

Domik941, пример тестовый нужно делать для иллюстрации проблемы...

<html>
<head>
    <title>test js page</title>
</head>
<body>
<script>alert("hello 111");</script>
<div>the 1 tag</div>
<div>the 2 tag</div>
<div>the 3 tag</div>

<script type="text/javascript" charset="UTF-8" src="script.js"></script>

<div>the 4 tag</div>
<div>the 5 tag</div>
<div>the 6 tag</div>
</body>
</html>

script.js:

var temp = document.getElementsByTagName('div');
var testHtml = '<script>alert("hello 222");</script>';
temp[2].innerHTML = (testHtml);

ksa · #5 (**permalink**) 27.12.2019, 15:00

Domik941, из примера не совсем понятно зачем исполняемый код вставлять через innerHTML в какой-то ДИВ... Если хочется простого его исполнения...

Если нужен запуск некоего скрипта, так это делается так
https://habr.com/ru/post/182310/

рони · #6 (**permalink**) 27.12.2019, 15:30

Domik941,
возможный вариант ...

<html>
<head>
    <title>test js page</title>
</head>
<body>
<script>alert("hello 111");</script>
<div>the 1 tag</div>
<div>the 2 tag</div>
<div>the 3 tag</div>

<script>
var testHtml = '<p>test script<\/p><script>alert("hello 222");<\/script>';
var parser = new DOMParser();
var doc = parser.parseFromString(testHtml, "text/html");
var div = document.querySelectorAll('div')[2];
div.innerHTML = "";
[...doc.body.children].forEach(el => {
if(el.tagName == "SCRIPT") {
 var s = document.createElement('script');
 s.type = "text/javascript";
 s.text = el.text;
 el = s;
}
div.append(el);
} )

</script>

<div>the 4 tag</div>
<div>the 5 tag</div>
<div>the 6 tag</div>
</body>
</html>

Vlasenko Fedor · #7 (**permalink**) 28.12.2019, 19:57

рони,
[...doc.body.children].forEach(el => {
if(el.tagName == "SCRIPT") {
лишний код, подход при этом часто встречается
ничего не мешает вставить скрипт в body без этого
скрипты вставленные динамически выполняются асинхронно, разницы нет
type также незачем, насколько я помню он по умолчанию "text/javascript";

<body>
<script>
var s = document.createElement('script');
s.text = "alert('Work')";
document.body.appendChild(s);
</script>
</body>

рони · #8 (**permalink**) 28.12.2019, 20:35

Сообщение от Poznakomlus

лишний код,

а как остальные элементы вставить?

Vlasenko Fedor · #9 (**permalink**) 28.12.2019, 21:05

рони,

doc в js на вебе это document
здесь ты нелогично назвал переменную, чем и ввел меня в заблуждение
а остальные элементы вставлять по ходу и не надо
у человека проблема простая, он получает текст к примеру аяксом, вставляет его в документ, в нем есть скрипт и он хочет, чтобы он так-же отработал
само наличие такой проблемы говорит о неправильном подходе(структуре,логике)
по сути может быть тег script как с внешним файлом так и и скодом
и тут уже стоило бы написать парсер для синхронной загрузки скрипта и после load выполнение кода
описал как понял сам

Domik942 · #10 (**permalink**) 30.12.2019, 00:11

Сообщение от рони

Domik941,
возможный вариант ...

Спасибо за решение, работает отлично.

Подскажите пожалуйста, а как мне сделать тоже самое на уровне тега <html> ?

Я попробовал поиграться с содержимым страницы целиком, начиная от тега <html>, но пытаясь добавить теги в html следующим кодом.

var testHtml = '<head><title>second page</title><script>alert("hello 111");</script></head><body><p>test script</p><script>alert("hello 222");</script><div>the 7 tag</div><div>the 8 tag</div><div>the 9 tag</div></body>';
var parser = new DOMParser();
var doc = parser.parseFromString(testHtml, "text/html");
var html = document.querySelectorAll('html')[0];
html.innerHTML = "";
[...doc.body.children].forEach(el => {
    if(el.tagName == "SCRIPT") {
        var s = document.createElement('script');
        s.type = "text/javascript";
        s.text = el.text;
        el = s;
    }
    html.append(el);
} )

Испектор показывает следующий HTML

<html>
<head></head>
<body></body>
<p>test script</p>
<script type="text/javascript">alert("hello 222");</script>
<div>the 7 tag</div>
<div>the 8 tag</div>
<div>the 9 tag</div>
</html>

Подскажите пожалуйста что я упустил.

Форум

Справочник

Discord чат

Курсы javascript