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

【问题标题】：Javascript getting called before the SPFX Webpart loaded on the sharepoint page在共享点页面上加载 SPFX Webpart 之前调用 Javascript
【发布时间】：2019-12-15 00:53:37
【问题描述】：

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

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

我用谷歌搜索了同样的内容和Reference

我在 javascript 函数中进行了修改，方法是在加载事件上调用函数而不是就绪函数。修改后在chrome浏览器中可以正常使用，但是在IE和Firefox中无法正常使用。

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

【问题讨论】：

标签： javascript typescript sharepoint document-ready spfx

【解决方案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)

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

【讨论】：

谢谢！如果我们使用 setTimeout 函数会出现一个问题，那么它可以正常工作，但在低带宽情况下，这不是一个好方法，还会降低性能

【解决方案2】：

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

来自MDN web docs：

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

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

【讨论】：

谢谢。我已经这样做了，但它不起作用，因为 SPFx webpart 需要更多时间来加载。