Данные externalHTML не полны

Question

HTML:

<div id="WholeNew">
    <script>func2()</script>
    <img src="x" onerror=func1() />
</div>

JS:

function func1()
{
    console.log(arguments.callee.caller.arguments[0].target.parentNode.outerHTML);
}

function func2()
{
    console.log(document.currentScript.parentNode.outerHTML);
}

Теперь посмотрим на вывод в консоли:

Для func1():

<div id="WholeNew">
    <script>func2()</script>
    <img src="x" onerror=func1() />
</div>

Для func2():

<div id="WholeNew">
    <script>func2()</script>
</div>

Почему есть разница в обоих выходах, как элемент в document.callee.caller.arguments[0].target из func1()document.currentScript.parentNode из func2() та же <div>? Мне нужен полный внешний HTML <div> от func2(),

Answer 1

Проблема в том, что при запросе document.currentScript.parentNode документ еще не готов. Попробуйте получить outerHTML на DOMContentLoaded:

function func2()
{
    currentScriptReference = document.currentScript;
    document.addEventListener('DOMContentLoaded', function(){
      console.log(currentScriptReference.parentNode.outerHTML);
    }, false);
}

Рабочий плункер: https://plnkr.co/edit/koZ1xDlpFacm7r9uY8lC?p=preview

Результат консольного журнала:

<div id="WholeNew">
    <script>func2()</script>
    <img src="x">
</div>