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)

рони 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>


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