在BigCommerce的结算页面中使用Javascript Mutation Observer时,可能会遇到无法观察到DOM更改的问题。这通常是由于Mutation Observer在异步加载时使用时引起的。
一种解决方法是通过将Mutation Observer包装在Promise中来解决此问题。以下是一个示例代码,它使用Promise解决这个问题:
const observeDOM = (element, config) => {
return new Promise(resolve => {
const observer = new MutationObserver(mutations => {
resolve(mutations);
observer.disconnect();
});
observer.observe(element, config);
});
};
const checkoutContainer = document.querySelector('.checkout-page');
const config = {childList: true, subtree: true};
const mutations = await observeDOM(checkoutContainer, config);
console.log('Mutations:', mutations);
在上面的代码示例中,MutationObserver被包装在observeDOM函数的Promise中。在返回异步结果时,MutationObserver会执行resolve()并立即取消观察器,以避免后续的DOM操作不会被观察到。
这样可以确保异步加载时,Mutation Observer可以正确地观察到DOM更改。