Javascript-форум - innerHTML и обработка js внутри него

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - innerHTML и обработка js внутри него (https://javascript.ru/forum/misc/79169-innerhtml-i-obrabotka-js-vnutri-nego.html)

Domik941

27.12.2019 14:26

innerHTML и обработка js внутри него

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

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

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

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

ksa	27.12.2019 14:29

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

рони	27.12.2019 14:44

Цитата:

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

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

:yes:

Domik941

27.12.2019 14:46

Цитата:

Сообщение от ksa (Сообщение 518112)

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	27.12.2019 15:00

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

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

рони	27.12.2019 15:30

вставка 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>

Vlasenko Fedor

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>

рони	28.12.2019 20:35

Цитата:

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

лишний код,

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

Vlasenko Fedor

28.12.2019 21:05

рони,

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

Domik942

30.12.2019 00:11

Цитата:

Сообщение от рони (Сообщение 518118)

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>

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

рони	30.12.2019 00:58

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>

Domik942

30.12.2019 01:38

Цитата:

Сообщение от рони (Сообщение 518172)

Domik942,
[html run height=500]<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">

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.

рони	30.12.2019 01:43

Domik942,
в строке 13.5 загрузите jquery

рони	30.12.2019 02:06

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>

рони	30.12.2019 02:31

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>

Domik942

30.12.2019 13:21

Цитата:

Сообщение от рони (Сообщение 518178)

Domik942,
или так ...

<!DOCTYPE html>
<html>
<head>

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> хоть и отображается в инспекторе, но он не выполняется.

рони	30.12.2019 14:04

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>

Domik942

30.12.2019 14:45

Цитата:

Сообщение от рони (Сообщение 518202)

Domik942,
[html run height=500]<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>

Это решение работает.

Можно вас попросить скинуть мне в пм ваш кошелек биткоина или usdt, я вам отправлю $100.

Domik942

12.01.2020 21:39

Цитата:

Сообщение от рони (Сообщение 518202)

Domik942,

<!DOCTYPE html>

Я столкнулся со следующей проблемой.
Почему-то такие события как 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());

рони	12.01.2020 22:01

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>

рони	12.01.2020 22:03

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>

Domik942

12.01.2020 22:22

Цитата:

Сообщение от рони (Сообщение 518655)

Domik942,

<html>

Не могу понять почему, но "onload 111" у меня никогда не высвечивается.

jquery 1.12.4, в консоли никаких ошибок нет.

рони	12.01.2020 22:48

Domik942,
скорее всего мало что грузится строка 28, событие load строка 17 назначается позднее.

Цитата:

Событие 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.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>

рони	12.01.2020 22:51

Цитата:

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

Не могу понять почему

читать тут https://learn.javascript.ru/onload-o...ded#readystate

Domik942

12.01.2020 23:12

Цитата:

Сообщение от рони (Сообщение 518657)

скорее всего мало что грузится строка 28, событие load строка 17 назначается позднее.
добавьте картинку и увидите оба сообщения.

Интересно то что если страница статическая, то всё работает нормально. Единственное что "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>

рони	12.01.2020 23:17

Цитата:

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

Единственное что "onload 111"

так вы же сами назначили его после загрузки html строка 4.$(function(){

а строка 9 (напрямую/сразу)
строка 9 сработает раньше чем строка 5

Domik942

13.01.2020 21:12

Цитата:

Сообщение от рони (Сообщение 518660)

Подскажите пожалуйста как мне переделать этот кусок кода под динамическое добавление на страницу, чтобы он работал корректно, так же как в статическом его варианте ?

<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>

рони	13.01.2020 21:49

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>

Domik942

13.01.2020 22:21

Цитата:

Сообщение от рони (Сообщение 518693)

<html>
<head>
    <meta http-equiv=content-type content="text/html;charset=UTF-8" />
    <title>test js page</title>
</head>

Я не могу понять в чём ошибка, но у меня не отображается "its okay" либо "cancelled". Подумал что может быть проблема в браузере, пробовал изначально в Firefox, на хроме тоже самое. Все алерты отображаются кроме тех confirm(TEST).

рони	13.01.2020 22:45

Цитата:

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

Я не могу понять в чём ошибка,

Цитата:

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

так вы же сами назначили его после загрузки html строка 4.$(function(){

обработка события ставится позднее чем само событие, всё загружено уже, события onload не будет.
вам дали ссылку на решение
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();
}
});

Domik942

16.01.2020 23:29

Цитата:

Сообщение от рони (Сообщение 518696)

обработка события ставится позднее чем само событие, всё загружено уже, события onload не будет.
вам дали ссылку на решение

Я только сейчас обратил внимание что на IE 11 не работает. Можно вас попросить подправить код чтобы на 11й версии IE тоже корректно работало ?

<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>

рони	17.01.2020 00:12

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, время: 02:14.