注入的JavaScript不会执行

Question

I'm trying to write a piece of javascript that integrates a webpage with an external system. Currently, what I have is a very small amount of code that dynamically inserts a script element into the page.

$(document).ready(function() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://example.com/example.php?arg1=1&arg2=2";
    document.body.appendChild(script);
});

The JS returned by the external system is a large one-line document.write call which writes a table to the page.

document.write('<table><tr><td>blah</td></tr></table>');

When I inject this script element into the page, I can see it using a DOM inspector, but the script does not appear to execute. If I put the script element into the HTML manually, the javascript executes just fine (so it's not a same origin policy or malformed html error...), but I'd like it to be dynamic.

Any ideas why the javascript isn't executing?

Answer 1

Using document.write after the DOM is ready will replace the contents of the page with whatever it is you're writing.

I suggest using one of the actual DOM manipulation methods if you want to insert anything into a page.

As far as the script not executing, are you positive it's being attached correctly? Have you tried setting a javascript breakpoint on the included script to verify that this is the case?

Answer 2

Because you are just including it, not executing. As you are using jQuery, take a look in the $.getScript() function.

http://api.jquery.com/jQuery.getScript/

It will fit your needs. This function is an Ajax function, so take care, because its behavior is asynchronous. Use its callbacks to execute code that is based in the loaded script.

Edit: Felix corrected me about the script execution, but I still think that you may give the function a try.

Answer 3

Try to use this code (it the same use by google for analytics or facebook).

Put it on the bottom of your page ;)

<script type="text/javascript">
    (function() {
        var script = document.createElement('script'); 
            script.type = 'text/javascript'; 
            script.async = true;
        script.src = '/example.php?arg1=1&arg2=2';
        var s = document.getElementsByTagName('script')[0]; 
            s.parentNode.insertBefore(script, s);
    })();
</script>

OR as davidbuzatto suggest, you have to use $.getScript() which is a shorthand $.ajax() function.

$(document).ready(function() {
    $.getScript("/example.php?arg1=1&arg2=2", function(data, textStatus, jqxhr) {
        console.log(data); //data returned
        console.log(textStatus); //success
        console.log(jqxhr.status); //200
        console.log('Load was performed.');
   });
});

Edit : Seens you have probably a cross-domain restriction, just try to use relative url "/example.php?arg1=1&arg2=2" instead of the full url for the include. Or if it's not the same web server, use a cross-domain.xml file.

Answer 4

i think you need to use JSONP to achieve that and using a call back function to append it to body tag

$(document).ready(function() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://example.com/example.php?arg1=1&arg2=2&callback=showit(data)";
document.body.appendChild(script);
});

 function showit(data){document.write(data);}

Answer 5

Why not just stick the JS in a separate window/iframe where it executes and displays the tables correctly, and then pull that table using AJAX to that page?

JQuery AJAX is the easiest to use IMO:

http://api.jquery.com/jQuery.ajax/

Answer 6

I've always seen this done more like:

document.write('<scr' + 'ipt>---scripthere---' + '</scr' + 'ipt>');

I'm assuming it is for similar reasons. Try that instead of creating a "real" script element.