If condition load external javascript script

Question

I have the following DIV:

<div id="top-ad"></div>

I want to load an external advertisement javascript script if the browser size is higher than 728. So, I need something like this:

<div id="top-ad">
     <script>
     if(window.innerWidth >= 728) {
        <script src="//go.*****.com/?id=****"></script>
     }
     </script>
</div>

Of course the above won't work. I tried to load the script asynchronously using Jquery like this:

<div id="top-ad">
     <script>
     if(window.innerWidth >= 728) {
        $.getScript("//go.*****.com/?id=****");
     }
     </script>
</div>

I tried the above method but I get the following error:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

I don't have access to the DOM elements inside the loaded script and they are actually dynamic and I'm not allowed to alter them. Is there a way to load the script inside the div element based on the if condition?

Or even if(innerWidth>=728) document.write('<script src="..."><'+'/script>');? — Niet the Dark Absol
– Niet the Dark Absol, Commented Aug 27, 2016 at 11:49
@NiettheDarkAbsol It is very bad practice to append scripts like that. — user6586783
– user6586783, Commented Aug 27, 2016 at 11:49
@SoftwareEngineer171 It is, I agree, but the script being appended itself uses document.write (as shown by the error message), so the only way to make that ad network's script work is to document.write it in. — Niet the Dark Absol
– Niet the Dark Absol, Commented Aug 27, 2016 at 11:50

Community · Accepted Answer · 2017-05-23 12:22:50Z

4

Since the script you're loading uses document.write(), you have to use document.write to add the script in your if statement.

if (window.innerWidth >= 728) {
    document.write('<script src="//go.*****.com/?id=****"></sc' + 'ript>');
}

Notice that you have to split up </script>, otherwise it will end the <script> tag that runs your script. See Why split the <script> tag when writing it with document.write()?

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Aug 27, 2016 at 11:53

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

3 Comments

Michael Samuel Over a year ago

I have also another question, by splitting the closing script tag like this, doesn't the tag get broken?

Barmar Over a year ago

No, because the concatenation puts it back together, so it's not broken when document.write() adds it to the document.

Barmar Over a year ago

@MichaelSamuel I've added a link to a question that explains it.

Collectives™ on Stack Overflow

If condition load external javascript script

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related