Ways to access a global JavaScript object in a separate .js file

Question

Ways to access a global JavaScript object in a separate .js file

How can I access an object that was initialized in my HTML document?

This is what my HTML document looks like:

    ...

<script type="text/javascript" id="controller">var controller = false;</script>

    ...

<body onload="controller = new CTRLclass()">

    ....

What is the best way to call controller.doAMethod() in an external JavaScript file using DOM operations or similar techniques?

Edit: Hey everyone, I have multiple .js files and my controller creates an instance of another class in its constructor. In this newly created instance of the class, I need to access the controller in order to call an update function. For example: The controller creates an instance of a class and the class needs to call controller.update(). How do I access the controller in the 'class' - That's all!

Thank you!

javascript

Answer 1

Answer №1

Eliminating the need for the onload tag to start onload tasks is simple. Just include the following in your external javascript file:

let control = false;
function Initialize(){
    control = new ControllerClass;
}
function registerEvent(element, eventType, callback, useCapture) {
    let useCapture = useCapture || true;
    if (element.addEventListener) {
        element.addEventListener(eventType, callback, useCapture);
        return true;
    } else if (element.attachEvent) {
        return element.attachEvent('on' + eventType, callback);
    } else {
        element['on' + eventType] = callback;
    }
}
registerEvent(window, 'load', Initialize);

Answer 2

Eliminating the need for the onload tag to start onload tasks is simple. Just include the following in your external javascript file:

let control = false;
function Initialize(){
    control = new ControllerClass;
}
function registerEvent(element, eventType, callback, useCapture) {
    let useCapture = useCapture || true;
    if (element.addEventListener) {
        element.addEventListener(eventType, callback, useCapture);
        return true;
    } else if (element.attachEvent) {
        return element.attachEvent('on' + eventType, callback);
    } else {
        element['on' + eventType] = callback;
    }
}
registerEvent(window, 'load', Initialize);

Answer 3

Answer №2

It's a bit puzzling as to why one would want to carry out the aforementioned steps. The solution is quite simple: remove all the JavaScript code as shown below:

...

<script type="text/javascript" src="myjsfile.js"></script>

...

<body>

....

Then, in the 'myjsfile.js', implement something like this:

window.onload = function(){
    var controller = new CTRLclass();
}

If it needs to be global, you can relocate it outside of the 'onload' function, like so:

var controller = false
window.onload = function(){
    controller = new CTRLclass();
}

Opting for jQuery would add more sophistication to the implementation and reduce the risk of overriding any existing 'onloads':

var controller = false
$(document).ready(function(){
    controller = new CTRLclass();
});

Answer 4

It's a bit puzzling as to why one would want to carry out the aforementioned steps. The solution is quite simple: remove all the JavaScript code as shown below:

...

<script type="text/javascript" src="myjsfile.js"></script>

...

<body>

....

Then, in the 'myjsfile.js', implement something like this:

window.onload = function(){
    var controller = new CTRLclass();
}

If it needs to be global, you can relocate it outside of the 'onload' function, like so:

var controller = false
window.onload = function(){
    controller = new CTRLclass();
}

Opting for jQuery would add more sophistication to the implementation and reduce the risk of overriding any existing 'onloads':

var controller = false
$(document).ready(function(){
    controller = new CTRLclass();
});

Ways to access a global JavaScript object in a separate .js file

Answer №1

Answer №2

Similar questions

React Chart.js allows for consistent spacing for x-axes by displaying dates in a well-organized

Using CSS to customize the appearance of the preview in CKEditor

Errors occur when using jQuery Autocomplete alongside Angular HTTP

Adaptable images - Adjusting image size for various screen dimensions

Textures in ThreeJS that are of type transparent PNG and have

Sending data with React using POST request

Unable to simultaneously execute TypeScript and nodemon

What is the method for importing the merge function from "lodash/merge" in TypeScript?

Dealing with Uncaught Type Errors in the Fixed Data Table

The creation of the Angular project was unsuccessful due to the outdated circular-json dependency

The Electron BrowserWindow turns dark post execution of the .show() method

Utilizing NodeJS and Express to enhance the client side for showcasing an uploaded file

Concluding the dialogue once the post request has been successfully processed

I am looking to obtain a value through a JavaScript function that sums values upon clicking. The result is satisfactory, but I am seeking a way to limit the value

Managing the uploading of files when a new property is included directly from the JavaScript File Object

Exporting NativeModules for npm package in React Native

The ID value did not pick up the number 0 when passed to the next blade after the initial reading

Using an anonymous function in Javascript to change the background color of a div on mouse-over directly from the HTML code

Ensure that the vue-router guard waits for the completion of the axios API call in Vuex before proceeding

How can you achieve three layers of nested quotes in Dynamic HTML?