无法使用 getElementByClass 获取元素 - 为什么 Adobe Target 无法获取容器值？未在 Adobe Target 中加载 html 内容

Question

在控制台添加以下代码：

document.getElementsByClassName("container");

在 noraml 门户网站下： 通过在控制台中添加代码，我可以获得容器值。 截图显示有3个容器。

在Adobe Target下，在Adobe Target内加载相同的网站后，并在控制台下添加相同的代码： 但容器是空的。

这表明

HTMLCollection [  ]

这意味着 Adobe Target 内没有容器。

如何解决这个问题？如何在Adobe Target中完整加载html内容？这是我第一次遇到这个问题。我不知道为什么 html 内容没有完全加载到 Adobe Target 中。希望您能帮忙解决问题。谢谢。

Answer 1

哇！我参加这个聚会迟到了！

这是因为在

getElementsByClassName

在页面/DOM 上可用之前，您的

containers

方法被调用得太早。目标元素可能由客户端 JavaScript 动态呈现，例如，使用

document.createElement

，然后使用

document.appendChild

方法将元素添加到 DOM 树。

解决方案：

在逻辑“捕获”内容之前，将逻辑写入 wait，以便内容在 DOM 上可用。

等待 DOM 元素渲染的一个简单模式是轮询逻辑，例如：

var intervalId = window.setInterval(function() {
  var containers = document.getElementsByClassName("container");
  if(containers.length > 0) {
    // DO SOMETHING
    // STOP polling
    window.clearInterval(intervalId);
  }
}, 250);

此模式在以下情况下很有用：

1. 您的开发范围仅限于在 Adobe Target 界面内进行构建。
2. 您没有操纵目标元素的内容。否则，请阅读下文。

补充阅读： 如果您的目的是操纵内容，您可能会看到操纵前的内容和操纵后的内容之间有短暂的“闪烁”。这对用户体验不利，因为更改可能会导致混乱和沮丧（就像诱饵和开关）。

如果您能够控制原始目标内容的渲染，那么您可以：

1. 通过将其

   visibility

   设置为

   hidden

   ，更新渲染逻辑以将它们渲染为隐藏在页面上。
2. 在 Adobe Target 内抓取和操作这些隐藏内容的逻辑中，在内容操作后重置

   visibility

   CSS 规则。

请注意，当取消隐藏这些元素的控制权交给 Adobe Target 中的逻辑时，应解决极端情况。在出现延迟/网络缓慢（互联网连接速度）的情况下，当 Adobe Target 请求超时时（由 Adobe here 进行解释）。呈现目标容器的逻辑还应该包含处理此用例的逻辑，通过侦听here列出的适当错误事件，并取消隐藏内容（正常的回退策略；您的业务可能会指示做其他事情）后备）。

编码快乐！