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

Страница 3 из 4

Показывать 40 сообщений этой темы на одной странице

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)

рони	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();
}
});

Часовой пояс GMT +3, время: 00:52.

Страница 3 из 4

Показывать 40 сообщений этой темы на одной странице