javascript - 在插入javascript元素之前等待元素出现不起作用
问题描述
我正在尝试在 wordpress elementor 迷你购物车为空时添加一个按钮。为此,我想我会使用一个承诺来等待元素加载,然后插入一些相邻的 html 代码来显示按钮。
这两个部分似乎分别返回一个承诺然后插入元素。然而,当他们一起工作时,没有元素出现?关于如何调试的任何想法?要注意什么。我如何监控每件事情的触发顺序以确保它以正确的顺序发生?
这是我下面的代码: 这是 wordpress 的一个片段。
<script>
const checkElement = async selector => {
while ( document.querySelector(selector) === null) {
await new Promise( resolve => requestAnimationFrame(resolve) )
}
return document.querySelector(selector);
};
checkElement('.woocommerce-mini-cart__empty-message').then((selector) => {
var message = `
<div style="margin-top:2rem" class="elementor-button-wrapper">
<a href="/toilets" class="elementor-button-link elementor-button elementor-size-sm">
<span class="class="elementor-button-content-wrapper">
<span class="elementor-button-text">View our products</span>
</span>
</a>
</div>`;
selector.insertAdjacentHTML('afterend', message);
console.log(selector);
});
</script>
<?php } );
有问题的页面是https://staging-woowoowaterlesstoilets.kinsta.cloud/如果您在没有任何东西的情况下单击篮子,应该会出现一个按钮。它以前可以工作,但是在更新了一些插件和 wordpress 之后它就停止了工作。
解决方案
这会更简单
const liveSelector = document.getElementsByClassName('woocommerce-mini-cart__empty-message');
let tId = setInterval(function() {
if (liveSelector.length > 0) {
clearInterval(tId)
var message = `
<div style="margin-top:2rem" class="elementor-button-wrapper">
<a href="/toilets" class="elementor-button-link elementor-button elementor-size-sm">
<span class="class="elementor-button-content-wrapper">
<span class="elementor-button-text">View our products</span>
</span>
</a>
</div>`;
liveSelector[0].insertAdjacentHTML('afterend', message);
console.log("done");
}
}, 500);
推荐阅读
- powershell - 用于检测 BizTalk 发送端口的活动实例的 PowerShell 脚本
- node.js - Nodejs/Puppeteer - 导航超时
- c# - PostSharp Caching MethodInterceptionAspect 使用 ASP.NET Core 内存缓存
- php - 带有 Fix header 的可滚动 Echo DB 表
- javascript - 与要从 readFileSync 方法返回的值的类型相关的基本查询?
- google-sheets - 如何在谷歌电子表格中使用带有查询功能的替代功能
- android - Android 7.0/自签名证书:“未找到证书路径的信任锚”
- php - 输入字段不呈现破折号
- javascript - babel transpile 到 es5 不适用于 node_modules
- java - 从 Jersey 过滤器或拦截器内部访问资源方法参数。或者将 AOP 与资源方法一起使用