The JavaScript code is executing before the SPFX Web Part has finished loading on the SharePoint page

Question

The JavaScript code is executing before the SPFX Web Part has finished loading on the SharePoint page

I recently set up a Sharepoint Page with a custom masterpage, where I deployed my SPFx Webpart that requires certain javascript files.

While the Webpart functions correctly at times, there are instances when it doesn't work due to the javascript being called before SPFx is loaded in the DOM. I even attempted placing the javascript in the custom masterpage, but the issue persisted.

Upon researching online, I came across this helpful Reference.

To address the issue, I modified the javascript function by calling it on the load event instead of the ready function. This resolved the problem in Chrome, but unfortunately, it's still not functioning properly in IE and Firefox.

I am wondering if there might be another approach to achieve the desired outcome.

javascript typescript sharepoint document-ready spfx

Answer 1

Answer №1

Essentially, if you find yourself just waiting around, one approach is to listen for the DOMContentLoaded event. This handy event listener is compatible across different browsers, including Firefox and even Internet Explorer 9.

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

If your SPFx code dynamically creates elements later on, you can wait for those elements to be present in the DOM. Check whether they exist before executing your desired function like this:

// Method 2
// Wait for the element to appear in the DOM
const waitForElement = (selector, timeout = 1000, callback) => {
    const interval = setInterval(() => {
        const element = document.querySelector(selector);
        if (element) {
            clearInterval(interval);
            // Execute desired functionality
            callback()
        } else {
            console.log('Element not found yet')
        }
    }, timeout);
};

// Simulate delay of 3 seconds and insert element into the DOM
setTimeout(() => {
    document.body.innerHTML = document.body.innerHTML + "<div id='test-div'>TEST</div>";
}, 3000);

const myFunction = () => console.log('Element found in the DOM');

waitForElement('#test-div', 1000, myFunction)

P.S. It's advisable to implement a fallback mechanism in case the element remains elusive after a certain duration, preventing the interval from running indefinitely.

Answer 2

Essentially, if you find yourself just waiting around, one approach is to listen for the DOMContentLoaded event. This handy event listener is compatible across different browsers, including Firefox and even Internet Explorer 9.

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

If your SPFx code dynamically creates elements later on, you can wait for those elements to be present in the DOM. Check whether they exist before executing your desired function like this:

// Method 2
// Wait for the element to appear in the DOM
const waitForElement = (selector, timeout = 1000, callback) => {
    const interval = setInterval(() => {
        const element = document.querySelector(selector);
        if (element) {
            clearInterval(interval);
            // Execute desired functionality
            callback()
        } else {
            console.log('Element not found yet')
        }
    }, timeout);
};

// Simulate delay of 3 seconds and insert element into the DOM
setTimeout(() => {
    document.body.innerHTML = document.body.innerHTML + "<div id='test-div'>TEST</div>";
}, 3000);

const myFunction = () => console.log('Element found in the DOM');

waitForElement('#test-div', 1000, myFunction)

P.S. It's advisable to implement a fallback mechanism in case the element remains elusive after a certain duration, preventing the interval from running indefinitely.

Answer 3

Answer №2

To manage how external scripts are loaded, you can utilize the async and defer attributes.

According to information from the MDN web docs:

defer: This attribute is a Boolean flag that instructs the browser to execute the script after parsing the document but before triggering DOMContentLoaded.

async: This attribute serves as a Boolean indicator for the browser to load the script asynchronously whenever possible.

Answer 4

To manage how external scripts are loaded, you can utilize the async and defer attributes.

According to information from the MDN web docs:

defer: This attribute is a Boolean flag that instructs the browser to execute the script after parsing the document but before triggering DOMContentLoaded.

async: This attribute serves as a Boolean indicator for the browser to load the script asynchronously whenever possible.

The JavaScript code is executing before the SPFX Web Part has finished loading on the SharePoint page

Answer №1

Answer №2

Similar questions

Navigating with React Router using URL parameters

The output of jquery's val() function will not show the actual value

Unexpected behavior: Promise.catch() fails to catch exception in AngularJS unit test

Run XQuery dynamically in JavaScript and store the outcome in a JavaScript variable

Heroku is showing an Error R10 (Boot timeout) message, indicating that the web process was unable to bind to the designated $PORT within one minute of launching

Create a compressed package of a Vue project that can easily be inserted into a Blogger blog post as a single HTML file

Empty req.params in nested ExpressJS routers

Does npm run use a separate version of TSC?

Manipulating the "placeholder" attribute with Knockout.js and JSON data

Obtain a string in JSON format upon clicking in Angular 2

Javascript code fails to execute properly on IE8

Calculating the time difference between two dates in the format yyyy-MM-ddTHH:mm:ss.fffffff can be done by following these steps

Puppeteer: What is the best way to interact with a button that has a specific label?

Exploring jQuery.each: A guide to navigating JSON objects

Issues with select options not functioning correctly in knockout framework

The font remains the same despite the <Div style=> tag

What is the best way to modify a constant array in Angular?

What is the functionality of observable in Angular? The 'includes' property is not present in the 'Observable' type

Is it possible to implement a custom sign-in form for AWS Cognito?

What is the process for deducting the ordered quantity from the available quantity once an order is confirmed