outerHTML 数据不完整

outerHTML data is not complete

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 of func1() document.currentScript.parentNode of func2() 中的元素是相同的 <div>?我需要 func2().

<div> 的完整外部 HTML

问题是在请求 document.currentScript.parentNode 时文档尚未准备好。尝试在 DOMContentLoaded:

上检索 outerHTML
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>