0

I load an iframe from third party source.

<iframe src="https://thirdparty.com/"></iframe>

In footer, I reference the JS script:

<script src="https://thirdparty.com/src.js"></script>

And I apply CSS styles also in footer. This is how third party says to load custom styles:

<script>thirdparty.setCss('https://example.com/site.css')</script>

To improve performance, I want to defer JS script. If I add defer to script

<script defer src="https://thirdparty.com/src.js"></script>

I get error: Uncaught ReferenceError: thirdparty is not defined. I think this is because CSS file loads before JS file.

How do I defer load of CSS file also as adding defer to CSS script does not work?

  • A CSS stylesheet file has nothing to do with any JS script and cannot possibly know if it's existence, it is 100% safe to load the CSS whenever you wish without any error thrown. – vsync Dec 14 '20 at 19:03
  • Most likely, "https://thirdparty.com/src.js" contains the source for the "thirdparty.setCss()" function. Put that line in an external file and add a `` line after the one referencing "src.js". – Heretic Monkey Dec 14 '20 at 19:05
  • You have this error because some other script was dependent on thiat third-party script which you have deferred, therefore it expected something to exist. You need to check which script is using this third-party script and understand the relationship of them. They *must* be loaded in **synchronized order**. – vsync Dec 14 '20 at 19:06
  • 1
    Get the `loadscript` function from here: https://stackoverflow.com/a/950146/3684265, then use this code: `loadScript('https://thirdparty.com/src.js', function(){ thirdparty.setCss('https://example.com/site.css') })` It will load the javascript file dynamically then onload it will use the setCSS within the call back function – imvain2 Dec 14 '20 at 19:10

0 Answers0