Running external JS function with document.write asyncronously

Question

We have a website that is supposed to be loading a logo provided by a 3rd party (the logo is a link that allows users to see that our site has been verified by that 3rd party.)

To get this to work, we're told to include a short script in the head

<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>

And another script in the body:

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

This all worked fine, initially: the external script is loaded, the function is run, the logo shows up. Perfect.

The problem occurred when the remote site got really slow...all of our pages that load this logo suddenly became very slow as well, since the script is running synchronously.

Ideally, I'd like this to work as if it were designed as an ajax type call...load the page, and after the page is loaded, attempt to load the extra content.

I've tried some combinations of async/defer and using things like ajax, but it seems that because the JS is using a document.write, if the page is fully loaded, the document.write blows away the existing document before writing the new data; the page loads...and then disappears and the logo appears. (I've seen some commentary explaining that this is expected behavior when document.write is used after the page is loaded.)

Is there a way to do this? Is there an alternate path I'm not considering?

Maybe move the script from the head to the bottom of the body. Only, ofcourse if the image is somewhere in or near the footer — Luca Kiebel
– Luca Kiebel, Commented Aug 14, 2018 at 16:03

T.J. Crowder · Accepted Answer · 2018-08-14 18:05:34Z

2

Looking at https://secure.comodo.com/trustlogo/javascript/trustlogo.js, the TrustLogo function itself uses document.write (indirectly, the code is minified, but eventually it does), which means you can't use those scripts asynchronously. If you make the first script asynchronous and append that JavaScript file another way, then you have to make the second script asynchronous, and that would mean document.write (within the TrustLogo function) would be called after the main HTML parsing is complete, which in turn means that there'd be an implicit document.open, which would erase your page. :-(

Of course...you could put all of that in an iframe on your main page, so that only the iframe, not your whole page, is impacted. Provided that's not a violation of the terms of use of the logo (obviously, you'd use a relative path for the iframe so their code sees the right domain and such).

edited Aug 14, 2018 at 18:05

answered Aug 14, 2018 at 16:07

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Beska Over a year ago

Unfortunate, but this is the conclusion that I was coming to as well (though, since I'm a relative JS tyro, I wasn't ready to give up until I ran it by some people smarter than me.) The iframe idea is also worth considering...I'll have to check the terms of the logo usage. Thanks!

UtkarshPramodGupta Over a year ago

@T.J.Crowder Yes, it does use document.write according to its code.

T.J. Crowder Over a year ago

@UtkarshPramodGupta - If so, then your answer won't work, for the reasons I mention above.

UtkarshPramodGupta Over a year ago

@T.J.Crowder Yes, Sir! I understand that. But, it seems like I have found a hack for it and I need you to look into my answer I'm about to post and comment whatever comes to your mind. :)

Beska Over a year ago

@T.J.Crowder I'll look around and see if I can easily find one on a site. Unfortunately, because of the loading issue I described, it's currently removed from our site, so viewing it there isn't an option right now.

|

Collectives™ on Stack Overflow

Running external JS function with document.write asyncronously

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related