使用document.write异步运行外部JS函数

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?

Answer 1

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