How to load scripts in website front-end but not Elementor editor through functions.php

Question

I am trying to enqueue a couple scripts and stylesheet on the home page of my website, but not have them load in the Elementor editor. As per this thread, I have used \Elementor\Plugin::$instance->editor->is_edit_mode() to determine if the site is in Elementor edit mode:

function mysite_child_enqueue_scripts_styles() {
    if ( is_front_page() && ! \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
        // Enqueue stylesheet
        wp_enqueue_style( 'mysite-child-preloader', get_stylesheet_directory_uri() . '/assets/css/preloader.css', array() );

        // Enqueue scripts
        wp_enqueue_script( 'mysite-child-modernizr', get_stylesheet_directory_uri() . '/assets/js/modernizr.custom.js', array(), null, true );
        wp_enqueue_script( 'mysite-child-scripts', get_stylesheet_directory_uri() . '/assets/js/scripts.js', array(), null, true );
        wp_enqueue_script( 'mysite-child-preloader', get_stylesheet_directory_uri() . '/assets/js/preloader.js', array(), null, true );
    }
}
add_action( 'wp_enqueue_scripts', 'mysite_child_enqueue_scripts_styles' );

This did not work however and i'm not sure why. The scripts still load in the Elementor editor when I inspect element and search for them. What am I missing here?

Answer 1

What about checking the url string for elementor?

if ( strpos($_SERVER['REQUEST_URI'], 'elementor') === false ) {
    // load scripts
}