时间戳

首页 > 解决方案 > 在 HTML 中加载特定 div 后如何执行 JavaScript？

javascript - 在 HTML 中加载特定 div 后如何执行 JavaScript？

问题描述

我想通过来自服务器端的特定 div / ul 的类名获取元素。但是当我尝试使用访问元素时

var element=document.getElementsByClassName("Class-Name");

它的返回未定义，因为：HTML 仍在呈现，但加载来自服务器端的特定 UL 需要时间。需要帮忙 ？

我努力了 ：

  1. 在 HTML 代码末尾编写脚本。
  2. 试过了window.load=function()

来自服务器（Site-core / CSHTML）的 UL：

<ul class=" Class-Name carousel-modal__info-list list-unstyled mb-0">
   <li>
      <h6>Space designed by</h6>
      <div class="row">
         <div class="col-6">By me</div>
         <div class="col-6 text-right">Link</div>
      </div>
   </li>
   <li>
</ul>
.
.
.
<script>
window.load = function(){
var element=document.getElementsByClassName("Class-Name");
console.log(element);
}
</script>

实际结果：未定义
预期： '与类相关的元素'

标签： javascriptjqueryhtmlsitecore

解决方案

如果这是服务器端渲染并且仅从服务器获取此代码块，请尝试在页面末尾不使用 window.onload 注入脚本。

例如，如果正在获取以下 HTML 片段，

<div id='test'>test</div>

您可以简单地在此页面的末尾编写您的脚本，也就是您的 html 结束的地方。

<div id='test'>test</div>
<script>
var testDiv = document.getElementById ('test');
</script>

此脚本将在test加载后立即执行。所以在你的情况下，注入下面的脚本</ul>。

注意：如果这是ulXHR 调用的结果，您可以将 JavaScript 添加到 XHR 的成功回调中。

window.onload在 DOM 完全加载时执行，包括图像和其他资源。在您的情况下，加载ul是一个明确的请求，因此window.onload在执行之前不会等待它。请参阅MDN 文档。

如果您无权访问 HTML 源代码，请在 JavaScript 中创建一个函数，并要求有权访问 HTML 源代码的开发人员在ul标签末尾执行您的函数。

很明显，在执行ul时未加载代码window.onload，因此您需要在源代码中注入脚本，或者如果它是 XHR 调用，则使用回调。

推荐阅读