Javascript在Chrome返回null, HTML元素在源

Javascript returns null in Chrome, HTML element in source

本文关键字：HTML 元素 null Chrome 返回 Javascript      更新时间：2023-09-26

我正在尝试在Chrome的控制台中读取此HTML:

<span id="lblSummaryFreight">Kr 79</span>

使用JS: 

document.getElementById('lblSummaryFreight').innerHTML;

但是，在页面加载之后，运行这一行返回null或无效。如果我检查元素然后运行代码，它会按预期工作并返回"Kr 79"。那么，这是我不知道的某种DOM问题，还是浏览器特定的问题?

我使用这作为一个变量在谷歌标签管理器，它在50%的情况下工作。我没有访问网页本身的源代码，所以这就是为什么我需要依靠这种相当笨拙的方式来获取数据。

很多关于这个的帖子表明，这是因为脚本是在DOM准备好之前触发的，但我不认为这是一个问题，因为我也在页面加载后在控制台中测试了这一点(并且HTML元素存在)，并且在谷歌标签管理器中，我已经指定了标签应该在DOM准备好后触发。

什么线索吗?

编辑/澄清:我不能改变页面本身的代码，只能读取输出源，我正在尝试通过GTM与JS

似乎无法解决这个问题，并且由于它似乎是一些古怪的来源的错误，我将尝试找出另一种方法来获得我需要的数据。

我学到了什么:

  • 这个问题似乎是特定于Chrome，因为它在其他浏览器中工作。这一点得到以下事实的支持:实现此代码的GTM标记在约50%的情况下返回正确的值
  • 在Android原生浏览器中测试页面，它也会返回'undefined'。重新加载触发标签的页面后，它返回正确的值。

  • 整个DOM在控制台中似乎不可用。

    document.getElementsByClassName(完整的). length

返回0，但是源中大约有10个该类实例。在检查页面上的任何位置后，它返回正确的数字。

  • 运行脚本的任何延迟都没有帮助，只有符号检查元素或重新加载页面才有帮助。

所以我的结论是，这个网页的构建方式在某种程度上违背了一些浏览器的纹理-看起来源代码在加载后就会耗尽内存。但这远远超出了我的理解水平。

感谢所有的输入!

这看起来像是一个异步问题。试试这个:

//Using Jquery
$( document ).ready(function() {
    document.getElementById('lblSummaryFreight').innerHTML;
});

或

//Add this at the end of the body, after all of your content
<script>
(function() {
     document.getElementById('lblSummaryFreight').innerHTML;
})();
</script>

尝试更改在GTM中触发标记的方式。当窗口加载时触发它们，然后再试一次。可能元素在另一个js文件中被更改了。

尝试jQuery是一个很好的观点。我也遇到过类似的问题，jQuery已经解决了它们。

相关文章：