Executing an external JavaScript function asynchronously using document.write

We are facing an issue with our website where a logo provided by a third party should be loading (the logo serves as a verification link for users).

To resolve this, we have been instructed to add a short script in the header

<script type="text/javascript"> 
    //<![CDATA[ 
    var tlJsHost = ((window.location.protocol == "https:") ? 
        "https://secure.comodo.com/" : "http://www.trustlogo.com/");
    document.write(unescape("%3Cscript src='" + tlJsHost + 
        "trustlogo/javascript/trustlogo.js' 
        type='text/javascript'%3E%3C/script%3E"));
    //]]>
</script>

Additionally, another script needs to be included in the body:

<script language="JavaScript" type="text/javascript">
    TrustLogo("https://ourfakesite.com/logo.png", "CL1", "none");
</script>

Initially, everything worked smoothly: the external script was loaded, the function executed, and the logo displayed. Perfect.

The issue arose when the remote site experienced significant slowdowns...all pages containing the logo loading scripts also slowed down due to synchronous script execution.

Ideally, I am looking for a solution that mimics an asynchronous AJAX call...loading the page first, then fetching additional content afterwards.

I have attempted various combinations of async/defer attributes and experimented with AJAX, but it seems that the document.write function causes problems after the page has fully loaded, resulting in disappearance of existing content before displaying the logo. (It appears that this is expected behavior with document.write post-page load.)

Is there a workaround for this issue? Are there alternative methods that I have overlooked?

javascriptasynchronous

Answer №1

Upon examining the source code located at 

https://secure.comodo.com/trustlogo/javascript/trustlogo.js
, it was discovered that the TrustLogo function relies on document.write (albeit indirectly due to minification), making it impossible to use these scripts asynchronously. Should one opt to make the initial script asynchronous and introduce the JavaScript file in a different manner, then the second script would also need to be asynchronous. This sequence of events would result in document.write within the TrustLogo function being executed after the primary HTML parsing is completed, triggering an implicit document.open action that could potentially erase the entire page. Unfortunate!

An alternative approach could involve enclosing all aforementioned functionality within an iframe embedded into the main page. By isolating this content in the iframe, only its contents would be affected rather than the entire page structure. Naturally, such a workaround must adhere to any terms of use governing the logo integration, ensuring compliance by employing a relative path for the iframe to maintain domain integrity.

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

apply a visible border to the item that is clicked or selected by utilizing css and vue

I have a list of items that I want to display as image cards with an active blue border when clicked. Only one item can be selected at a time. Below is the code snippet: Template Code <div class="container"> <div v-for="(obj ...

javascriptcssvue.js

Tips for effectively utilizing a cart collection system

I am currently exploring how to utilize sessions for user tracking and updating my cart collection. Below is the code from my route.js file in an Express and Node application: app.post('/cart/:id', function (req, res) { if (!userKey) { ...

javascriptnode.jsexpress

What could be the reason behind an Ajax Auto-Complete feature suddenly malfunctioning when moving to a new page within the same website?

Working on a website featuring an auto-complete search box powered by Ajax, Javascript, and PHP. As the user types into the search box, an ajax request triggers a php file to query a database and return possible results. Everything works smoothly until the ...

javascriptphphtmlajaxautocomplete

Ways to troubleshoot the "TypeError: Cannot read property 'value' of null" issue in a ReactJS function

I keep encountering a TypeError: Cannot read property 'value' of null for this function and I'm struggling to pinpoint the source of the issue. Can someone help me figure out how to resolve this problem? By the way, this code is written in R ...

javascriptreactjsmaterial-ui

Tips on incorporating "get_template_directory_uri" into a JavaScript function

I am currently working on my WordPress PHP file code, where I have included a JavaScript snippet to display names and images from a query. While the names are being displayed correctly, I am encountering an issue with the images not showing up. After tryi ...

javascriptphpwordpress

Highcharts' 'this' function yielding duplicate objects

I am struggling with using the tooltip pointFormatter in Highcharts to display this.name just once. However, I am facing an issue where the same object is being returned twice, causing it to appear duplicated in the tooltip. You can view the problem in ac ...

javascriptjquerychartshighcharts

Challenges arise with the height settings of ui-grid

Currently, I am facing an issue with using height: auto on an angularJS ui-grid. The problem arises from an inline style that specifies a fixed height on the div to which the ui-grid attribute is added. Additionally, the function getViewPortStyle() dynamic ...

javascriptcssangularjsangular-ui-grid

"Transferring a variable from the parent Layout component to its children components in Next

I am trying to figure out how to effectively pass the variable 'country' from the Layout component to its children without using state management. Basically, I want to drill it down. import { useState, useEffect } from 'react' import La ...

javascriptreactjsnext.js

Error message: Element is not able to receive focus due to an

Here is the code snippet for the input field: <span ng-if="cell.state != 'edit_mode'" class="ng-scope"> <span ng-class="{'with-right-padding' : cell.input_type === 'auto_complete'}" class="value-cell ng-binding"& ...

javascriptangularjsseleniumprotractor

Is there a way to retrieve both the items within a specific category and its corresponding subcategories simultaneously?

Presently, I am managing two models for Category and subcategory. The category model provides an array of data as shown below: category = [ {_id: '1', name: 'Appliances', slug: 'appliances'}, {_id: '2', na ...

javascriptreactjsredux

Creating an interactive Threejs environment using Blender and manipulating objects within it

Here's the issue I'm facing: I created a scene in Blender and exported it using the io_three addon. The resulting JSON file contains all objects when the scene option is selected during export. If I do not select this option, only the currently ...

javascriptjsonthree.jsblender

Guide on how to beautify HTML and generate output files in the identical directory as the current one

Hey there! I'm currently working as a junior front-end developer and have recently delved into using gulp. One of the challenges I face is dealing with HTML files received from senior developers that aren't well-formatted, containing excessive wh ...

javascriptgulp

sticky bootstrap datepicker anchored to the top of the screen

Currently, I am working on a form that includes a date picker using the bootstrap datepicker In this setup, I have hidden the main bootstrap field and added three custom fields. When any of these fields are clicked, the calendar should open next to them. ...

javascripthtmljquerycss

What could be the reason behind the disruption in this JavaScript associative array?

I'm facing an issue with my associative array, which I have confirmed through console.log to be initially: this.RegionsChecked = {"US":true,"APAC":true,"Canada":true,"France":true,"Germany":true,"India":true,"Japan":true,"LATAM":true,"MEA":true,"UK": ...

javascriptarraysdom

Invoking PHP function within a specific class using Ajax

I am currently utilizing Zend Framework. My PHP class is structured as follows: FileName : AdminController.php Path : /admin/AdminController.php Ajax Function : function exportToExcel() { $.ajax({ url: "/admin/AdminController/testFunction", ty ...

javascriptphpjqueryajax

Is there a way to efficiently transform an 'Array of Objects' with values 'Array of Object' into an array of Objects with individual array values using JS/lodash?

I utilized the lodash library to divide arrays into chunks (batches). let values = { 'key1' : [lotsOfValues1], 'key2' : [lotsOfValues2] }; let keys = ['key1', 'key2']; let arrObj = []; keys.forEach((key) => ...

javascriptjsonobjectecmascript-6lodash

How can I ensure that my asynchronous code is consistently executed on the same thread within a native node module?

In the process of developing a native node module in C++, I am creating a binding for a C library. It is crucial to note that certain objects within this library should only be accessed by a single thread. However, using uv_queue_work presents a challenge ...

javascriptcnode.jsnode-moduleslibuv

Is it more advantageous to create two distinct projects for the frontend and backend along with an API, or should I consolidate them into a

Asking for some guidance on a few queries I have. I've developed a backend node server with express & mongo to run specific tasks and store them in the database, along with creating an admin page using express & bootstrap. Everything is functioning s ...

javascriptnode.jsmongodbexpressvue.js

Appreciating the Importance of Generator Functions in JavaScript

Can someone help me understand the practicality of using generator functions in JavaScript? I know they can be used for iterating through custom data types, but I'm not entirely convinced that they are superior to standard iteration techniques. For a ...

javascriptnode.jsdata-structureses6-generator

Dynamically update a dropdown menu with options based on the user's selection from a prior dropdown list using ajax and JSP Servlet

I am working on creating a real-time project for a consultancy and could use some assistance with developing a JSP page. Specifically, I need to allow the user to select a Client (Company name) from a dropdown list. Once a Client is selected, the HR list ...

javascriptjqueryajaxjspservlets