outerHTML данных не является полным

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>? Мне нужно полное externalHTML <div> от func2().

Answer 1

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

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

Работа plunker: https://plnkr.co/edit/koZ1xDlpFacm7r9uY8lC?p=preview

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

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