Safari 省略元素答案

【问题标题】：Safari omitting elementsSafari 省略元素
【发布时间】：2021-02-25 15:44:18
【问题描述】：

我知道这很难得到帮助，但无论如何：

简而言之：此页面在 Safari（Mac 和 iPhone/iPad）上第一次呈现正常，第二次（刷新后）某些内容未显示.以私人模式打开页面 -> 始终有效。在 Chrome 中打开它 -> 始终有效

长篇大论：该页面是一个临时解决方案，并被一起破解......目前它由Caspio（无代码快速开发环境）驱动。无代码的代价是有限的可能性。我们正在一个适当的前端/后端环境中重写系统，但暂时我们应该让这个页面工作。

该页面由 Caspio 呈现的 2 个块组成。我需要从块 2 中获取一些元素，并使用 JS 将它们放入块 1 的元素中（然后隐藏块 2）。同样，如何获取元素的选项受到 Caspio 提供的内容的限制，这是非常肮脏的代码，我希望尽快摆脱它！


        <script type="text/javascript">
          window.addEventListener("load", function (e) {
            const dataPageId = "46629000bb2da6866c8b4cc09dc1";

            // Default image for the promotion (in case no image uploaded)
            var theImage = document.createElement("img");
            theImage.setAttribute("src", "images/noImageFound.png");
            theImage.setAttribute("alt", "No Image");

            // get the text form the placeholder virtual fields and hide it (not possible in Caspio to hide it)

            // First get the title
            var promoTitleVirtual = document.querySelectorAll("[id*='cbParamVirtual1']");
            
            var promoTitleParagraph = document.createElement("h3");
            var promoTitle = document.createTextNode(promoTitleVirtual[0].value);
            promoTitleParagraph.appendChild(promoTitle);
            promoTitleVirtual[0].style.display = "none";

            // Now the description
            var promoDescriptionVirtual = document.querySelectorAll("[id*='cbParamVirtual2']");
            var promoDescriptionParagraph = document.createElement("span");
            promoDescriptionParagraph.classList.add("w-screen")
            var promoDescription = document.createTextNode(promoDescriptionVirtual[0].value);
            promoDescriptionParagraph.appendChild(promoDescription);
            promoDescriptionVirtual[0].style.display = "none";

            // The Image
            var images = document.getElementsByTagName("img");

            for (i = 0; i < images.length; i++) {
              if (images[i].src.includes(dataPageId)) {
                theImage = images[i];
              }
            }
            var promotionImage = document.getElementById("promotionImage");

            // reposition the radio so it looks better

            var promoAnswers = document.querySelectorAll(
              "[class*='cbFormBlock24']"
            );

            promotionImage.appendChild(promoTitleParagraph);
            promotionImage.appendChild(theImage);
            promotionImage.appendChild(promoDescriptionParagraph);
            theImage.parentNode.lastChild.style.width = theImage.width + "px";
            promotionImage.appendChild(promoAnswers[0]);
 });```


The image is always shown, the Title and the Description only the first time

【问题讨论】：

标签： javascript html safari mobile-safari caspio

【解决方案1】：

发现问题...对于那些使用 Caspio 环境的人来说可能会很有趣！显然，Caspio 不会立即加载所有数据，所以即使我等到所有数据都加载完毕：

 window.addEventListener("load", function (e)

不是……

Hacky（但是这段代码就是这样，等不及要重新编写它）我添加了一个：

 setTimeout(function() {
...
}, 300)

到我的代码，所以它会等到 Caspio 完成其业务。（200 还可以，安全起见放 300）

【讨论】：