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

I'm perplexed as to why my array remains empty despite assigning a value to it in my controller. (Just to clarify, I am working with AngularJS, not Angular)

ReactJS state refuses to update

Is there a way for me to identify the vertical gaps in my code using JavaScript?

Distinguishing div identifiers for jQuery displaying and concealing

Utilizing the fs module in Node.js

Creating users or custom roles in MongoDB on a NodeJS server is not currently possible

Discover the steps to display a user's username following a successful login utilizing Passport.js

Disabling the camera feed in a React application

How to toggle between checked and unchecked states using jQuery within AngularJS?

Attempting to manipulate information within the @click event handler embedded within a v-for loop

Error message: Conflicting type declarations across multiple files

Creating a jsp page content with jquery and retrieving request parameters

Encountering a 403 status code from the Spotify Web API while attempting to retrieve data using an OAuth 2.0 Token

The Angular route successfully navigated to the page, but the HTML content was not

SharePoint 2013 only allows the first AJAX request to work successfully, except when in Edit Mode

An error occurred stating "No matching closing tag found for "<%" when attempting to include the file

Increasing the maximum width of an image in CSS is necessary to see the max-height take effect

The field '_id' is not present in the type Pick

Ensure the video fills the entire width of its parent element and adjusts its height accordingly to maintain a 16:9

Animation event in CSS3 fails to trigger on Firefox browser