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> Подскажите пожалуйста что я упустил. |
Domik942,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <script> var testHtml = '<head><title>second page</title><script>alert("hello 111");</scr'+'ipt></head><body><p>test script</p><script>alert("hello 222");</sc'+'ript><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 htmlOld = document.querySelector('html'); var htmlNew = doc.querySelector('html'); document.replaceChild(htmlNew, htmlOld); document.querySelectorAll('script').forEach(el => { var s = document.createElement('script'); s.text = el.text; el.parentNode.replaceChild(s, el) } ) </script> </body> </html> |
Цитата:
var testHtml = '<head><title>second page</title></head><body><p>test script</p>' + '<script src="jquery.min.js"></script>' + '<script>alert("Hello 1");' + '' + '$(document).ready(function(){\n' + ' alert(jQuery.fn.jquery);\n' + '});</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 htmlOld = document.querySelector('html'); var htmlNew = doc.querySelector('html'); document.replaceChild(htmlNew, htmlOld); document.querySelectorAll('script').forEach(el => { var s = document.createElement('script'); s.text = el.text; if ((el.src).length > 0){ s.src = el.src; } el.parentNode.replaceChild(s, el) } ) JS выдаёт ошибку. ReferenceError: $ is not defined. |
Domik942,
в строке 13.5 загрузите jquery |
Domik942,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <script> var testHtml = '<head><title>second page</title></head><body><p>test script</p>' + '<script src="jquery.min.js"></scr'+'ipt>' + '<script>alert("Hello 1");' + '' + '$(document).ready(function(){\n' + ' alert(jQuery.fn.jquery);\n' + '});</scr'+'ipt>' + '<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 htmlOld = document.querySelector('html'); var htmlNew = doc.querySelector('html'); document.replaceChild(htmlNew, htmlOld); var script = document.createElement('script'); document.querySelector('head').appendChild(script); script.onload = ()=> document.querySelectorAll('script').forEach(el => { var s = document.createElement('script'); if(el.text){s.text = el.text; el.parentNode.replaceChild(s, el)} }); script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'; </script> </body> </html> |
Domik942,
или так ... <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <script> var testHtml = '<head><title>second page</title></head><body><p>test script</p>' + '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scr' + 'ipt>' + '<script>alert("Hello 1");' + '' + '$(document).ready(function(){\n' + ' alert(jQuery.fn.jquery);\n' + '});</scr' + 'ipt>' + '<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 htmlOld = document.querySelector('html'); var htmlNew = doc.querySelector('html'); document.replaceChild(htmlNew, htmlOld); [...document.querySelectorAll('script')].reduce((promise, el) => { return promise.then(() => new Promise((resolve, reject) => { var s = document.createElement('script'); s.onload = resolve; if (el.text) { s.text = el.text; } else s.src = el.src; el.parentNode.replaceChild(s, el); })) }, Promise.resolve()); </script> </body> </html> |
Цитата:
var testHtml = '<head><title>second page</title></head><body><p>test script</p>' + '<script src="jquery.min.js"></script>' + '<script>alert("Hello 1");' + '' + '$(document).ready(function(){\n' + ' alert(jQuery.fn.jquery);\n' + '});</script>' + '<script>alert("Hello 2");</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 htmlOld = document.querySelector('html'); var htmlNew = doc.querySelector('html'); document.replaceChild(htmlNew, htmlOld); [...document.querySelectorAll('script')].reduce((promise, el) => { return promise.then(() => new Promise((resolve, reject) => { var s = document.createElement('script'); s.onload = resolve; if (el.text) { s.text = el.text; } else s.src = el.src; el.parentNode.replaceChild(s, el); })) }, Promise.resolve()); Странно, <script>alert("Hello 2");</script> хоть и отображается в инспекторе, но он не выполняется. |
Domik942,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <script> var testHtml = '<head><title>second page</title></head><body><p>test script</p>' + '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scr' + 'ipt>' + '<script>alert("Hello 1");' + '' + '$(document).ready(function(){\n' + ' alert(jQuery.fn.jquery);\n' + '});</scr' + 'ipt>' + '<script>alert("Hello 2")</scr'+'ipt>'+ '<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 htmlOld = document.querySelector('html'); var htmlNew = doc.querySelector('html'); document.replaceChild(htmlNew, htmlOld); [...document.querySelectorAll('script')].reduce((promise, el) => { return promise.then(() => new Promise((resolve, reject) => { var s = document.createElement('script'); if (el.text) { s.text = el.text; resolve(); } else { s.onload = resolve; s.src = el.src; } el.parentNode.replaceChild(s, el); })) }, Promise.resolve()); </script> </body> </html> |
Цитата:
Можно вас попросить скинуть мне в пм ваш кошелек биткоина или usdt, я вам отправлю $100. |
Цитата:
Почему-то такие события как window.onbeforeunload и window.onload не срабатывают внутри jquery. <html> <head> <meta http-equiv=content-type content="text/html;charset=UTF-8" /> <title>test js page</title> </head> <body> <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> var testHtml = '<head><title>second page</title></head><body><p>test script</p>' + '<script src="jquery.min.js"></script>' + '<script>alert("Hello 1");' + '$(function(){\n' + ' window.onload = function (){\n' + ' alert ("onload 111");\n' + ' };\n' + '});'+ 'window.onload = function (){\n' + ' alert ("onload 222");\n' + ' };'+ '$(document).ready(function(){\n' + ' alert(jQuery.fn.jquery);\n' + '});</scr' + 'ipt>' + '<script>alert("Hello 2")</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 htmlOld = document.querySelector('html'); var htmlNew = doc.querySelector('html'); document.replaceChild(htmlNew, htmlOld); [...document.querySelectorAll('script')].reduce((promise, el) => { return promise.then(() => new Promise((resolve, reject) => { var s = document.createElement('script'); if (el.text) { s.text = el.text; resolve(); } else { s.onload = resolve; s.src = el.src; } el.parentNode.replaceChild(s, el); })) }, Promise.resolve()); |
Domik942,
onload 222 не сработает, потому что его сотрёт onload 111(или наоборот), если нужно то и это используйте window.addEventListener("load"). <html> <head> <meta http-equiv=content-type content="text/html;charset=UTF-8" /> <title>test js page</title> </head> <body> <div>the 1 tag</div> <div>the 2 tag</div> <div>the 3 tag</div> <script>var testHtml = '<head><title>second page</title></head><body><p>test script</p>' + '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"><\/script>' + '<script>alert("Hello 1");' + '$(function(){\n' + ' window.onload = function (){\n' + ' alert ("onload 111");\n' + ' };\n' + '});'+ 'window.onload = function (){\n' + ' alert ("onload 222");\n' + ' };'+ '$(document).ready(function(){\n' + ' alert(jQuery.fn.jquery);\n' + '});</scr' + 'ipt>' + '<script>alert("Hello 2")<\/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 htmlOld = document.querySelector('html'); var htmlNew = doc.querySelector('html'); document.replaceChild(htmlNew, htmlOld); [...document.querySelectorAll('script')].reduce((promise, el) => { return promise.then(() => new Promise((resolve, reject) => { var s = document.createElement('script'); if (el.text) { s.text = el.text; resolve(); } else { s.onload = resolve; s.src = el.src; } el.parentNode.replaceChild(s, el); })) }, Promise.resolve()); </script> <div>the 4 tag</div> <div>the 5 tag</div> <div>the 6 tag</div> </body> </html> |
Domik942,
<html> <head> <meta http-equiv=content-type content="text/html;charset=UTF-8" /> <title>test js page</title> </head> <body> <div>the 1 tag</div> <div>the 2 tag</div> <div>the 3 tag</div> <script>var testHtml = '<head><title>second page</title></head><body><p>test script</p>' + '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"><\/script>' + '<script>alert("Hello 1");' + '$(function(){\n' + ' window.addEventListener("load", function (){\n' + ' alert ("onload 111");\n' + ' });\n' + '});'+ 'window.addEventListener("load", function (){\n' + ' alert ("onload 222");\n' + ' });'+ '$(document).ready(function(){\n' + ' alert(jQuery.fn.jquery);\n' + '});</scr' + 'ipt>' + '<script>alert("Hello 2")<\/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 htmlOld = document.querySelector('html'); var htmlNew = doc.querySelector('html'); document.replaceChild(htmlNew, htmlOld); [...document.querySelectorAll('script')].reduce((promise, el) => { return promise.then(() => new Promise((resolve, reject) => { var s = document.createElement('script'); if (el.text) { s.text = el.text; resolve(); } else { s.onload = resolve; s.src = el.src; } el.parentNode.replaceChild(s, el); })) }, Promise.resolve()); </script> <div>the 4 tag</div> <div>the 5 tag</div> <div>the 6 tag</div> </body> </html> |
Цитата:
jquery 1.12.4, в консоли никаких ошибок нет. |
Domik942,
скорее всего мало что грузится строка 28, событие load строка 17 назначается позднее. Цитата:
<html> <head> <meta http-equiv=content-type content="text/html;charset=UTF-8" /> <title>test js page</title> </head> <body> <div>the 1 tag</div> <div>the 2 tag</div> <div>the 3 tag</div> <script>var testHtml = '<head><title>second page</title></head><body><p>test script</p>' + '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"><\/script>' + '<script>alert("Hello 1");' + '$(function(){\n' + ' window.addEventListener("load", function (){\n' + ' alert ("onload 111");\n' + ' });\n' + '});'+ 'window.addEventListener("load", function (){\n' + ' alert ("onload 222");\n' + ' });'+ '$(document).ready(function(){\n' + ' alert(jQuery.fn.jquery);\n' + '});</scr' + 'ipt>' + '<script>alert("Hello 2")<\/script>'+ '<div>the 7 tag</div><div>the 8 tag</div><div>the 9 tag<img width="100%" src="https://unsplash.it/3000/3000/?random" /></div></body>'; var parser = new DOMParser(); var doc = parser.parseFromString(testHtml, 'text/html'); var htmlOld = document.querySelector('html'); var htmlNew = doc.querySelector('html'); document.replaceChild(htmlNew, htmlOld); [...document.querySelectorAll('script')].reduce((promise, el) => { return promise.then(() => new Promise((resolve, reject) => { var s = document.createElement('script'); if (el.text) { s.text = el.text; resolve(); } else { s.onload = resolve; s.src = el.src; } el.parentNode.replaceChild(s, el); })) }, Promise.resolve()); </script> <div>the 4 tag</div> <div>the 5 tag</div> <div>the 6 tag</div> </body> </html> |
Цитата:
|
Цитата:
Интересно то что если страница статическая, то всё работает нормально. Единственное что "onload 111" выполняется последним. <head><title>second page</title></head><body><p>test script</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> '<script>alert("Hello 1"); $(function(){ window.addEventListener("load", function (){ alert ("onload 111"); }); }); window.addEventListener("load", function (){ alert ("onload 222"); }); $(document).ready(function(){ alert(jQuery.fn.jquery); });</script>' + <script>alert("Hello 2")</script> <div>the 7 tag</div><div>the 8 tag</div><div>the 9 tag</div></body> |
Цитата:
а строка 9 (напрямую/сразу) строка 9 сработает раньше чем строка 5 |
Цитата:
<html><head><title>second page</title></head><body><p>test script</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> alert("Hello 1"); $(function(){ var text2 = "test message here\n\n11\n2\n3"; TEST = text2, window.onbeforeunload = function(a) { var c = TEST; return a.returnValue = c; }, window.onload = function() { if (confirm(TEST)) { alert("its okay"); } else { alert("cancelled"); } }; }); window.addEventListener("load", function (){ alert ("onload 222"); }); $(document).ready(function(){ alert(jQuery.fn.jquery); }); </script> <script>alert("Hello 2")</script> <div>the 7 tag</div><div>the 8 tag</div><div>the 9 tag</div></body></html> |
Domik942,
<html> <head> <meta http-equiv=content-type content="text/html;charset=UTF-8" /> <title>test js page</title> </head> <body> <div>the 1 tag</div> <div>the 2 tag</div> <div>the 3 tag</div> <script> var testHtml = '<html><head><title>second page</title></head><body><p>test script</p>'+ '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"><\/script>'+ '<script>'+ ' alert("Hello 1");'+ ' $(function(){'+ ' var text2 = "test message here\\n\\n11\\n2\\n3";'+ ' TEST = text2, window.onbeforeunload = function(a) {'+ ' var c = TEST;'+ ' return a.returnValue = c;'+ ' }, window.onload = function() {'+ ' if (confirm(TEST)) {'+ ' alert("its okay");'+ ' } else {'+ ' alert("cancelled");'+ ' }'+ ' };'+ ' });'+ ' window.addEventListener("load", function (){ '+ ' alert ("onload 222");'+ ' });'+ ' $(document).ready(function(){ '+ ' alert(jQuery.fn.jquery); '+ ' });'+ '<\/script> '+ '<script>alert("Hello 2")<\/sc'+'ript>'+ '<div>the 7 tag</div><div>the 8 tag</div><div>the 9 tag</div></body></html>'; var parser = new DOMParser(); var doc = parser.parseFromString(testHtml, 'text/html'); var htmlOld = document.querySelector('html'); var htmlNew = doc.querySelector('html'); document.replaceChild(htmlNew, htmlOld); [...document.querySelectorAll('script')].reduce((promise, el) => { return promise.then(() => new Promise((resolve, reject) => { var s = document.createElement('script'); if (el.text) { s.text = el.text; resolve(); } else { s.onload = resolve; s.src = el.src; } el.parentNode.replaceChild(s, el); })) }, Promise.resolve()); </script> <div>the 4 tag</div> <div>the 5 tag</div> <div>the 6 tag</div> </body> </html> |
Цитата:
|
Цитата:
Цитата:
вам дали ссылку на решение https://learn.javascript.ru/onload-o...ded#readystate $(function() { function work() { if (confirm(TEST)) { alert("its okay"); } else { alert("cancelled"); } } if (document.readyState == 'loading') { // ещё загружается, ждём события window.onload = work; // лучше window.addEventListener("load", work) } else { // DOM готов! work(); } }); |
Цитата:
<html> <head> <meta http-equiv=content-type content="text/html;charset=UTF-8" /> <title>test js page</title> </head> <body> <div>the 1 tag</div> <div>the 2 tag</div> <div>the 3 tag</div> <script> var testHtml = '<html><head><title>second page</title></head><body><p>test script</p>'+ '<script>\n' + 'alert("Hello IE ?");' + '<\/script>'+ '<div>the 7 tag</div><div>the 8 tag</div><div>the 9 tag</div></body></html>'; var parser = new DOMParser(); var doc = parser.parseFromString(testHtml, 'text/html'); var htmlOld = document.querySelector('html'); var htmlNew = doc.querySelector('html'); document.replaceChild(htmlNew, htmlOld); [...document.querySelectorAll('script')].reduce((promise, el) => { return promise.then(() => new Promise((resolve, reject) => { var s = document.createElement('script'); if (el.text) { s.text = el.text; resolve(); } else { s.onload = resolve; s.src = el.src; } el.parentNode.replaceChild(s, el); })) }, Promise.resolve()); </script> <div>the 4 tag</div> <div>the 5 tag</div> <div>the 6 tag</div> </body> </html> |
Domik942,
:-? <html> <head> <meta http-equiv=content-type content="text/html;charset=UTF-8" /> <title>test js page</title> </head> <body> <div>the 1 tag</div> <div>the 2 tag</div> <div>the 3 tag</div> <script> var testHtml = '<html><head><title>second page</title></head><body><p>test script</p>'+ '<script>\n' + 'alert("Hello IE ?");' + '<\/script>'+ '<div>the 7 tag</div><div>the 8 tag</div><div>the 9 tag</div></body></html>'; var htmlNew = document.createElement('html'); htmlNew.innerHTML = testHtml; var htmlOld = document.querySelector('html'); document.replaceChild(htmlNew, htmlOld); var scripts = document.querySelectorAll('script'); var len = scripts.length; var n = 0; (function loadScripts() { if(n < len) { var el = scripts[n++]; var s = document.createElement('script'); if (el.text) { s.text = el.text; loadScripts(); } else { s.onload = loadScripts; s.src = el.src; } el.parentNode.replaceChild(s, el); } })() </script> <div>the 4 tag</div> <div>the 5 tag</div> <div>the 6 tag</div> </body> </html> |
Часовой пояс GMT +3, время: 00:00. |