How to insert script tag and execute response via src?

Question

I have a script tag which calls a remote JavaScript snippet through src, and writes it on the page, thus rendering a banner in the process.

I'm looking for a way to call the script, or insert the script via JavaScript. Right now it looks like this:

<div id="<?php print $banner_id; ?>" class="banner-responsive <?php print $breakpoints; ?>">
  <script src="<?php print $url; ?>"></script>
</div>

This is the preferred method supplied by the banner vendor. I'm looking for a way to implement it more like this:

<div class="banner">
  <div id="<?php print $banner_id; ?>">
    <script type="text/javascript">
      function banner_load(){
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = '<?php print $url; ?>';
        var x = document.getElementById('<?php print $banner_id; ?>');
        x.parentNode.appendChild(s);
      }
      if (window.attachEvent)
        window.attachEvent('onload', banner_load);
      else
        window.addEventListener('load', banner_load, false);
    </script>
  </div>
</div>

This sort of works. It inserts the script tag, and calls the remote URL, but it does not execute the JS snippet received like it does in example 1, and because of that the banners do not appear. Is there a way for me to execute the script src at will?

What the src response could look like:

document.write("<a target='_blank' href='http://domain/?options'><img src='http://domain/whateever-930x180px.jpg' alt='Click here' /></a>");

I want to do this, so I can switch banners at specific moments, based on pre-defined break points. How would you go about this? Any thoughts?

Update: I don't have any control over the output. It's an external banner supplier. I take it that this is impossible?

jfriend00 · Accepted Answer · 2012-10-14 20:04:12Z

1

You cannot dynamically load javascript that uses document.write() and get the result you want.

Dynamically loaded javascript runs AFTER the DOM has been loaded. When document.write() is used after the DOM has been loaded, it clears the entire document and starts a new empty document. As such, it will not do what you want.

If you want to dynamically load the Javascript, then you will need to use DOM manipulations (e.g. document.createElement() and elem.appendChild()) to insert your banner into the existing DOM and not use document.write(). document.write() is only useful for this type of problem when it is done inline with sequentially loaded javascript either inline or via <script> tags in the markup (not via dynamically loaded javascript).

answered Oct 14, 2012 at 20:04

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

3 Comments

Kalms Over a year ago

Yes, I assumed that this was the problem. The thing is, I have no control of the response, and can't fetch it with ajax, so I'm left to work with what I have. It looks like I have to talk with the banner supplier.

jfriend00 Over a year ago

If you can't control the script, then you can't insert it dynamically unless you want to put it in an iframe where you can let the document.write() do its thing without disturbing the rest of your document.

Kalms Over a year ago

Taking the site into account, I'd really like to avoid a situation where I'm forced to use iframes. Thank you for the answer!

asleepysamurai · Accepted Answer · 2012-10-14 20:08:05Z

0

There are several ways you can do this:

Instead of returning a document.write, you could return a HTML snippet and then use appendChild to write your banners. Generally using document.write is a bad javascript practice.
If you must use document.write, then rather than inserting the script tags url insert the response from the url directly into your banner_load function.

edited Oct 14, 2012 at 20:08

answered Oct 14, 2012 at 19:52

asleepysamurai

1,3622 gold badges14 silver badges23 bronze badges

3 Comments

Kalms Over a year ago

Forgot to point out, that I have zero control of the output. I will update the question to reflect this.

Kalms Over a year ago

Can you please elaborate a bit on 2.?

asleepysamurai Over a year ago

Use file_get_contents to retrieve the script server side, and print that response directly into your banner_load function.

Collectives™ on Stack Overflow

How to insert script tag and execute response via src?

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related