How can I dynamically load and execute Javascript from the server without using eval()?

Question

I'm writing a PHP framework which allows PHP developers to create ExtJS interfaces with forms, grids, tabpanels and menus using PHP classes only.

In order to create a TabPanel, for example, a PHP class is instantiated with an array of URLs which get loaded dynamically when the user clicks on a tab header.

In order to do this, I use the following Javascript function which loads a PHP page via AJAX call and executes any scripts inside it.

function loadViewViaAjax(url) {
    Ext.Ajax.request({
        url: url,
        success: function(objServerResponse) {
            var responseText = objServerResponse.responseText;
            var scripts, scriptsFinder=/<script[^>]*>([\s\S]+)<\/script>/gi;
            while(scripts=scriptsFinder.exec(responseText)) {
                eval(scripts[1]);
            }
        }
    });
}

I often read as in the answers to this question that there is usually no need to use eval() since what you need to do with eval() can be usually be achieved in others ways. I also understand that executing scripts within a PHP page loaded via AJAX presents a security risk that would need to be locked down in other ways, so I would like to find another, safer way to do this if possible.

What would be an alternative way to dynamically load and execute javascript from the server without eval(), so that I have the same functionality as I do now with the above script, i.e. TabPanels which load and execute Javascript from the server only when the tab headers are clicked?

kioopi · Accepted Answer · 2010-12-22 09:25:32Z

7

You could always load your additional Javascript via script injection. If you create a new SCRIPT element and place it in the DOM, the browser will download the script and execute it. As a simplified example you could use this:

var newScript = document.createElement('script'); 
newScript.setAttribute('src', 'http://www.example.com/url/of/your/script.php'); 
document.body.appendChild(newScript);

If you'd like a more secure approach, i'd recommend to research "JSONP".

answered Dec 22, 2010 at 9:25

kioopi

2,2902 gold badges20 silver badges26 bronze badges

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

1 Comment

Edward Tanguay Over a year ago

thanks for the JSONP idea, here is a good explanation of it: remysharp.com/2007/10/08/what-is-jsonp

Christopher Klewes · Accepted Answer · 2010-12-22 09:32:07Z

0

You could return a file URL of the scripts in your server response (even temporary files). With this URL you could dynamically add these scripts to your head. If this is to complicated you could also return text and include this via:

var head = document.getElementsByTagName('head').item(0);
var script = document.createElement('script');
    script.language = "javascript";
    script.type = "text/javascript";
    script.id = "script-id";
    script.defer = true;
    script.text = source;

    head.appendChild(script);

I hope this helps.

answered Dec 22, 2010 at 9:32

Christopher Klewes

11.5k18 gold badges77 silver badges103 bronze badges

Comments

David Mårtensson · Accepted Answer · 2010-12-22 09:53:44Z

0

An alternative to eval, even though it is not any safer is to wrap the code in a function body and call the function.

var body = "you source here";

var f = Function(body);

f();

This can be used to load reusable code segments.

answered Dec 22, 2010 at 9:53

David Mårtensson

7,6244 gold badges34 silver badges48 bronze badges

Collectives™ on Stack Overflow

How can I dynamically load and execute Javascript from the server without using eval()?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related