CODEWITHSUNDEEP
javascripthtml
Adam C
Adam C

Reputation: 75

Injecting HTML that contains JS

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/

Upvotes: 0

Views: 141

Answers (2)

Barmar
Barmar

Reputation: 780698

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>

Upvotes: 0

Aaron Digulla
Aaron Digulla

Reputation: 328556

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

Upvotes: 2

Related Questions