Question

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

有时Webpart可以正常工作，但有时不是由于我的JavaScript在SPFx加载到DOM之前调用的。（我还试图将javascript放在自定义母版页中仍然面临相同的问题）

我用相同的方法搜索了Reference

我通过对load事件（而不是ready函数）进行调用来对javascript函数进行修改。修改后，它在chrome浏览器中可以正常工作，但在IE和Firefox中无法正常工作。

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

Answer 1

您可以使用属性async和defer控制外部脚本的加载行为。

来自MDN web docs：

defer ：此布尔属性设置为向浏览器指示脚本应在解析文档之后但在触发DOMContentLoaded之前执行。

异步：这是一个布尔属性，指示浏览器（如果可能）应异步加载脚本。

Answer 2

从根本上说，这只是一个简单的等待，您可以做的一件事就是等待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)

P.S。您可能想添加一个备用，以防在一段时间后找不到该元素，否则该间隔将永远运行。

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

2 个答案: