javascript - 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].targetoffunc1() document.currentScript.parentNode中的元素func2()是相同的<div>？我需要<div>from的完整外层HTML func2()。

Answer 1

问题是，当要求document.currentScript.parentNode的文件还没有准备好。尝试检索outerHTMLon 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>