outerHTML 数据不完整

Posted 2023-05-07

【中文标题】outerHTML 数据不完整

【英文标题】：outerHTML data is not complete

【发布时间】：2016-11-18 15:27:20

【问题描述】：

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>？我需要来自func2() 的<div> 的完整outerHTML。

【问题讨论】：

您使用的是哪个浏览器？由于错误，我无法在 IE11 或 Chrome51 中复制该问题。可能与该被调用者已弃用有关。不是迂腐，而是你试图用这段代码解决的问题是什么，因为这看起来不像是最好的设计恕我直言。

我可以在 Chrome 51 和 Firefox 47 中成功运行代码。由于使用了target，IE 无法运行。使用srcElement。你得到什么错误？我只是在试验这种特定的代码行为。

根据我放置函数定义的位置，我得到调用者或被调用者未定义。您将包含函数的脚本放置在什么位置？您是否使用实际的图片网址尝试过此操作？也许 src 是 'x' 搞砸了。

我用arguments.callee.caller.arguments[0].target.parentNode.outerHTML 替换了document.callee.caller.arguments[0].target.outerHTML，现在我复制了您遇到的问题。我找不到任何关于 document.callee 的文档。无论如何，既然我看到了这个问题，就看看为什么 outerHTML 有所不同。

好的。由于您在解析 DOM 时立即触发 func2() ，因此 DOM 仍在加载。当我从地方切换 script 标签和 img 标签时，两者 fn 给出相同的结果。 （包括 img 标签）所以我正在考虑 img 标签在加载时不会出现在 DOM 中的方向。

【参考方案1】：

问题是当请求document.currentScript.parentNode 时，文档还没有准备好。尝试在DOMContentLoaded 上检索outerHTML：

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>