|
innerHTML и обработка js внутри него
Доброго времени суток.
Я столкнулся с необходимостью замены части HTML кода внутри div'a, но если в заменяемом коде есть <script>...</script>, то эти скрипты не выполняются. Вы не могли бы объяснить как мне быть в этой ситуации, чтобы вставленный HTML+JS код работал корректно. Либо же мне вставляемый код разбирать по тегам, и создавать каждый из них через createElement ? Спасибо за ответ. |
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);
|
Domik941, из примера не совсем понятно зачем исполняемый код вставлять через innerHTML в какой-то ДИВ... Если хочется простого его исполнения... :blink:
Если нужен запуск некоего скрипта, так это делается так https://habr.com/ru/post/182310/ |
вставка html script
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>
|
рони,
[...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>
|
Цитата:
|
рони,
doc в js на вебе это document здесь ты нелогично назвал переменную, чем и ввел меня в заблуждение а остальные элементы вставлять по ходу и не надо у человека проблема простая, он получает текст к примеру аяксом, вставляет его в документ, в нем есть скрипт и он хочет, чтобы он так-же отработал само наличие такой проблемы говорит о неправильном подходе(структуре,логике) по сути может быть тег script как с внешним файлом так и и скодом и тут уже стоило бы написать парсер для синхронной загрузки скрипта и после load выполнение кода описал как понял сам |
Цитата:
Подскажите пожалуйста, а как мне сделать тоже самое на уровне тега <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>
Подскажите пожалуйста что я упустил. |
| Часовой пояс GMT +3, время: 23:56. |
|