Is it possible that loading a JavaScript script in Chrome isn't functioning properly?

Question

Is it possible that loading a JavaScript script in Chrome isn't functioning properly?

I am currently attempting to use Javascript to load the script below:

function put() {
    var group = document.getElementById("obj_0123456790");
    var children = group.childNodes;

    for( var i = 0; i < children.length; i++ ) {    
        if( (children[i].name == 'movie') || (children[i].name == '') ) {
            children[i].src = "http://website.com/song.swf";
        }    
    }
}

if (window.attachEvent) {
    window.attachEvent('onload', put);
} else {
    if (window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            put();
        };
        window.onload = newonload;
    } else {
        window.onload = put;
    }
}

The above script is loaded using the following code snippet:

<script>
var i=document.createElement('script');
i.src="http://website.com/putter.js";
document.head.appendChild(i);
</script>

While it performs as expected in Firefox, unfortunately, it does not work in Chrome. How can I modify it so that it functions properly in Chrome?

javascript

Answer 1

Answer №1

1. This JavaScript function is designed to load scripts asynchronously, ensuring cross-browser compatibility.

function loadScript(src, callback)
{
  var s,
      r,
      t;
  r = false;
  s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = src;
  s.onload = s.onreadystatechange = function() {
    if ( !r && (!this.readyState || this.readyState == 'complete') )
    {
      r = true;
      callback();
    }
  };
  t = document.getElementsByTagName('script')[0];
  t.parent.insertBefore(s, t);
}

2. If jQuery is already included on the page, simply use $.getScript(url, successCallback).

The recommended approach is to place all scripts at the bottom of the HTML page to prevent blocking content loading. For less commonly used complex interactions, lazy loading can be beneficial to improve performance.

3. Google provides an example:

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js?onload=onLoadCallback';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

4. Check out this wiki article for more information: .

5. Consider using Modernizr for asynchronous loading of JavaScript files with features that allow checking if the file is loaded before executing a specified script.

Here's an example of loading jQuery:

Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js',
    complete: function () {
      if ( !window.jQuery ) {
            Modernizr.load('js/libs/jquery-1.6.1.min.js');
      }
    }
  },
  {
    // This will wait for the fallback to load and
    // execute if it needs to.
    load: 'needs-jQuery.js'
  }
]);

Answer 2

1. This JavaScript function is designed to load scripts asynchronously, ensuring cross-browser compatibility.

function loadScript(src, callback)
{
  var s,
      r,
      t;
  r = false;
  s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = src;
  s.onload = s.onreadystatechange = function() {
    if ( !r && (!this.readyState || this.readyState == 'complete') )
    {
      r = true;
      callback();
    }
  };
  t = document.getElementsByTagName('script')[0];
  t.parent.insertBefore(s, t);
}

2. If jQuery is already included on the page, simply use $.getScript(url, successCallback).

The recommended approach is to place all scripts at the bottom of the HTML page to prevent blocking content loading. For less commonly used complex interactions, lazy loading can be beneficial to improve performance.

3. Google provides an example:

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js?onload=onLoadCallback';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

4. Check out this wiki article for more information: .

5. Consider using Modernizr for asynchronous loading of JavaScript files with features that allow checking if the file is loaded before executing a specified script.

Here's an example of loading jQuery:

Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js',
    complete: function () {
      if ( !window.jQuery ) {
            Modernizr.load('js/libs/jquery-1.6.1.min.js');
      }
    }
  },
  {
    // This will wait for the fallback to load and
    // execute if it needs to.
    load: 'needs-jQuery.js'
  }
]);

Is it possible that loading a JavaScript script in Chrome isn't functioning properly?

Answer №1

Similar questions

"Why is the success handler in the AngularJS controller not being triggered by the $http service

Navigate through the overlay's content by scrolling

When implementing asynchronous form control validation in Angular 2, several API requests are triggered

Unable to locate the variable named setState

React App with Material UI V1-beta Integration

Struggling with a TypeError in React/Next-js: Why is it saying "Cannot read properties of undefined" for 'id' when the object is clearly filled with data?

Generating Legible JavaScript Code from TypeScript

Is there a way to pre-load images from component B within component A using Vue?

Achieving both positive and negative styling in AngularJS with ng-class: A guide

If using conditional SCSS, consider overriding the variables

Purpose of triggering another function during an ajax request

Consistently Incorrect Date Formatting in Bootstrap Display

Issue in TypeScript: Property '0' is not found in the type

Which medium is the optimal choice for file manipulation in Node.js and JavaScript?

Storing JSON response in memory with Node.js: A handy guide

Encountered a 404 error while trying to delete using VueJS, expressJS, and axios. Request failed with

Unable to retrieve data from input field

Create a dynamic animation effect by making a div slide on and off the screen

Having trouble importing my function component into a router in reactjs. Need some guidance on how to properly set it up

"Trouble with JavaScript boolean values in if-else conditions - not functioning as expected