Injecting HTML that contains JS

Question

I've been given some great tips on how to inject HTML into HTML that I can't edit.

The trouble is now that the snippet contains JS it won't render to the page.

The Jquery looks lke this:

    $(document).ready(function() {   
            var $body = $(document.body);   
              if ($body.is(".ly_productdetails.ProductDetails.en.en_GB")) {
            $('.info_section').prepend('<div id="test-widget"></div><script type="text/javascript" src="/frontend/latest/build.min.js"  data-test="test-widget" data-instance="xyz" data-apikey="12345678" data-tags="" async="async"></script>');
        }
        });

I tried putting backslashes in before the quotations but this didn't work.

How else can you write this to the page so that the JS is included?

Many thanks,

Adam

JSfiddle : https://jsfiddle.net/fs6qgzrj/

Can you please provide a full example.. as in the page your putting this in to. Ideally a jsFiddle so we can work with your example. You would be better of creating a new script tag instead of using prepend.. — Angry 84, Apr 09 '15 at 15:45
You should probably load your script from your js code instead of injecting html to load it. — noinstance, Apr 09 '15 at 15:48
Refer to http://stackoverflow.com/questions/610995/cant-append-script-element — Angry 84, Apr 09 '15 at 15:48
the fiddle here is using a inline script, having one with src would fail. But still proves point can be done depending on the need — Angry 84, Apr 09 '15 at 15:54
Your fiddle is reporting a syntax error in the JS console. Also, the URL of the `.js` file is incorrect -- it doesn't have a hostname, so it's looking for the script on the jsfiddle server. — Barmar, Apr 09 '15 at 15:57
I've confirmed that it doesn't load an external JS file: https://jsfiddle.net/barmar/fs6qgzrj/5/ — Barmar, Apr 09 '15 at 16:03

score 2 · Answer 1 · edited May 23 '17 at 12:28

2

This is a security feature. jQuery allows <script> elements in HTML code but it won't execute them (at least not the src="..." part; inline scripts work). This is because jQuery has no way to make sure the script isn't malicious or from a safe source (an error in your code might allow people to enter scripts in a form element).

Use jQuery.getScript(url, successCallack) instead.

See also: jQuery - script tags in the HTML are parsed out by jQuery and not executed

edited May 23 '17 at 12:28

Community

1
1

answered Apr 09 '15 at 15:48

Aaron Digulla

321,842
108
597
820

I just tried `$('body').append('')` in the Javascript console and it alerted. – Barmar Apr 09 '15 at 15:52
I was about to say the same thing. I think you refer to `.html()` in particular, that won't execute the script while `.append()` does: https://jsfiddle.net/rg7c3sr2/ – BeNdErR Apr 09 '15 at 15:54
@BeNdErR All the jQuery methods that insert DOM elements eventually flow into the same code. – Barmar Apr 09 '15 at 15:55
1

What doesn't work is loading an external JS file. It only works with inline HTML. – Barmar Apr 09 '15 at 16:04
@Barmar that's what I was worried about. The widget I'm trying to inject on the page is an external JS – Adam C Apr 09 '15 at 16:08
@Barmer: I updated my answer to make it clear that the `src` attribute is the problem. – Aaron Digulla Apr 09 '15 at 16:10

score 0 · Answer 2 · answered Apr 09 '15 at 16:17

It looks like jQuery won't load an external script when parsing HTML. But if you create a script element it will:

$('body').prepend($('<script>', {
  src: 'http://dev.bridgebase.com/barmar_test/test.js'
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Injecting HTML that contains JS

2 Answers2