在共享点页面上加载 SPFX Webpart 之前调用 Javascript

Question

我创建了带有自定义母版页的 Sharepoint 页面，我在其中部署了需要一些 javascript 文件的 SPFx Webpart。

有时 Webpart 工作正常，但有时不是因为我在 DOM 上加载 SPFx 之前调用了 javascript。(我也尝试将 javascript 放在自定义母版页中仍然面临同样的问题)

我用谷歌搜索了相同的和Reference

我通过在加载事件上调用函数而不是就绪函数来对 javascript 函数进行相同的修改。修改后在chrome浏览器中正常运行，但在IE和Firefox浏览器中无法正常运行。

有没有其他方法可以得到正确的结果。

Answer 1

基本上，如果只是简单的等待，您可以做的一件事就是等待 DOMContentLoaded。这是一个跨浏览器的事件监听器，可以在 firefox 中工作，甚至可以追溯到 ie9。

// Option 1
    window.addEventListener("DOMContentLoaded", function () {
        console.log('ready')
    }, false);

如果您的 SPFx 代码稍后才创建该元素，您可以等待它创建的元素之一，检查它是否存在，然后才像这样调用您的函数:

// Option 2
// Wait for the DOM element to be in the DOM
const inDom = (selector, timeout = 1000, callback) => {
    const interval = setInterval(() => {
        const elem = document.querySelector(selector);
        if (elem) {
            clearInterval(interval);
            // Do stuff
            callback()
        } else {
            console.log('Not in dom')
        }
    }, timeout);
};

// Wait 3 seconds and add the element to the DOM
setTimeout(() => {
    document.body.innerHTML = document.body.innerHTML + "<div id='test-div'>TEST</div>";
}, 3000);

const myAwesomeFunction = () => console.log('Element in dom');

inDom('#test-div', 1000, myAwesomeFunction)

附言您可能想添加一个回退以防元素在一段时间后无处可寻，否则间隔将永远运行。