Certain browsers have limitations when it comes to dynamically calling a .js file from an HTML page

Calling a .js file from my HTML page is done like this:


var value1 = "Hello";
var value2 = "John";

var oHead1 = document.getElementsByTagName('HEAD').item(0);
var paramScript = document.createElement("script");

paramScript.type = "text/javascript";

paramScript.setAttribute('value1',
value1);
paramScript.setAttribute('value2',
value2);

oHead1.appendChild(paramScript);

var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript = document.createElement("script");
oScript.type = "text/javascript";
oScript.src = "some.js";
oHead.appendChild(oScript);

This implementation works smoothly in Android and iPhone browsers, however, it encounters issues with the Blackberry OS 5.0 browser.

Are there any alternatives to achieve the same functionality that would be compatible with all browsers?

Answer №1

Instead of creating an empty script tag with attributes assigned to variables, it would be more efficient to utilize the variables defined at the start of the script...

var value1 = "Hello";
var value2 = "John";

This approach not only decreases the number of DOM manipulations needed, but also streamlines the process of accessing the variables in some.js.

I also recommend encapsulating your JavaScript code within a self-invoking function.

(function(){
    // Your Code Here
}());

Answer №2

Consider utilizing a library loader such as LAB or Frame. These libraries have addressed numerous browser-specific issues related to script loading, although I cannot guarantee compatibility with Blackberry OS 5.0.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to display Div in Firefox browser

When I display a dialog box, everything appears except for the contents in the header DIV. This issue only occurs in Firefox, as it displays fine in IE and Chrome. I am not implementing anything complex in the dialog box, any thoughts on why this is happen ...

View two tiled images side by side and seamlessly load them in real-time with our innovative image viewer

Currently, I am working on creating a webpage where two tiled images can be loaded and displayed side by side. The goal is for these images to zoom in together but remain separately tiled. After doing some research, it seems that using Seadragon may not al ...

Using async await in Firestore to retrieve a post title

My goal is to retrieve a post title from Firestore, but I'm having trouble figuring out how to do so using async await. async getVideo(id) { var self = this; const ref = this.$fire.firestore .collection("posts") .where("ytid ...

Is there a way to retrieve the filename of a file uploaded using a shiny fileInput function?

This shiny app has a feature where users land on the 'Upload data' panel upon launching. To restrict access to the other two 'tabpanels', users must first upload both necessary files in the 'Upload data' tab. The condition for ...

How can I connect a JavaScript function with a Bootstrap Text Input Modal?

My webpage contains a basic Bootstrap Modal with a text input field, which I want to display when the "Report A Bug" button is clicked. <div class="btn-group" id="exampleModal" role="group"> <button id="myBtn ...

Updating data in MongoDB using a POST request in Angular 2

I am currently working on implementing a post request to update a value in MongoDB. The scenario involves a user inputting a new value (bitcoin) into a form, which triggers the post request upon submission: bitcoinChange(bitcoin){ let headers = new ...

When using React.js Material UI's CardActionArea with a flex display, the children elements may not automatically use the full width as expected

Getting straight to the point - I recently experimented with changing the display style property from block to flex, along with setting flexDirection: 'column' for the CardActionArea component. The main goal was to ensure that CardContent maintai ...

Does this configuration for the formkit seem correct?

import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import { plugin, defaultConfig } from "@formkit/vue"; import "./assets/tailwind.css"; import "aos/dist/aos.c ...

Leverage Redis to facilitate memory sharing among node.js instances in RxJS

We are currently developing a project that involves creating an event processor using RxJS. The system relies on specific rules where input is collected from various sources and output is generated based on the frequency of inputs exceeding a certain thres ...

Ways to check if a tag has been rendered using Jest and Enzyme

I'm having trouble figuring out how to properly test if an element is rendered or not. Here's the test I wrote: const props = { type: 'test_plan', renewal: '25.06.2019', subscriptionName: 'Test', }; test(&apos ...

What is the best way to direct users to the individual product page once they make a selection

On my main products page, I am fetching all the products from a local JSON file. interface productItem { id: number; name: string; image: string; price?: string; prices: { half: string; full: string; }; ...

Ways to send notifications through Firebase Cloud Messaging (FCM)

I have written a cloud function that listens for document creation in a specific collection within my database Below is the code snippet of the function: const functions = require('firebase-functions'); const admin = require('firebase-admin ...

React-onclickoutside does not function properly within an iframe

I have developed a custom drop-down list using reactjs. I utilized react-onclickoutside to recognize clicks outside the list and close it. While this method works effectively, it does not respond to clicks within an iframe. import onClickOutside from &apo ...

Modifying Copyright Feature in Footer

I am attempting to implement this function within my dark-colored footer: import Typography from '@material-ui/core/Typography'; function Copyright() { return ( <Typography variant="body2" color="textSecondary" align="center"> ...

Developing a void or vacancy using three.js

Thinking about creating a unique shape in three.js, similar to a 3x3x3 cube with a 1x1x1 hole in it. Is there a way to use cubegeometry initially and then apply another geometry to remove the unwanted parts, like a deletion geometry? :D Appreciate any hel ...

Unable to update array with HTTP Put request: No document was found that matches the criteria. The method 'send' is not available

I'm facing some challenges when trying to execute HTTP Put requests within an array using AngularJS and ExpressJS. The problem arises when I make the first HTTP Put call, everything works fine. However, on subsequent attempts, it fails to work. Below ...

Are strings in an array being truncated by Firebug console log?

I have a unique function for logging messages to the firebug console that I'd like to share: // Just having fun with names here function ninjaConsoleLog() { var slicer = Array.prototype.slice; var args = slicer.call(arguments); console.lo ...

When using Webpack, there may be difficulties resolving relative path import of express static files

I am currently developing an Outlook add-in with an Express server running. To ensure compatibility with Outlook Desktop, I need to transpile JavaScript to ES5 using Webpack. Below is the simplified structure of my project: /public /javascripts ssoAu ...

Retrieving JSON data by key through ajax does not show the expected output

I'm currently working with JSON data in the form of an array, and I'm facing some issues. Here's how the data looks: [ { "id": 1, "name": "Leanne Graham", "username": "Bret", ...

How do I combine Firefox binary specification with adding the Firebug extension when using Selenium?

Presently I am utilizing the code below. var co = require('co'); var WebDriver = require('selenium-webdriver'); var SeleniumServer = require('selenium-webdriver/remote').SeleniumServer; co(function *() { // async var ser ...