在ajax中运行javascript外部链接甚至内部

Question

How many ways are to excute javascrpit code in ajaxed page ? internal and externally ... I really need to execute my scripts but found no way to my goal I tried eval in a loop & getscript method etc ... but no result is there a real way to execute my scripts ? I'm using load function to load my page please help me
I have google map it work in usual way but when I use ajax to load it, it won't work here's my code

$('ul li a').on("click",function() {
    var link = $(this).attr("href") + " #contentx";
    $('#contentx').fadeOut('slow', function(){
        $('#contentx').load(link, function(){     
            $("#mapjs").each(function(i) {
                eval($(this).text());
            });
            $('#contentx').fadeIn('slow');
        });
    });
    return false;
});

Answer 1

i tried eval in a loop This really should work, could you post the code that you used?

You can run javascript from another source with the eval() function.

ie:

eval("alert(\"hello world\")");

Would show a message hello world.

Answer 2

You'll need to move your JS block ( <script id="mapjs">...</script> ) into its own dedicated file.

If you're using $.load with a landing page fragment (ie a URL followed by #id), then any script tags will be removed, and not executed. See the Script Execution section of the $.load documentation .

Psuedo-code - the 'proper' way would be be something like this:

$('ul li a').on("click",function() {
    var link = $(this).attr("href") + " #contentx";
    $('#contentx').fadeOut('slow', function(){
        $('#contentx').load(link, function(){
            if($(this).attr('href') == 'http://wearesevil.com/?page_id=16'){     
                $.getScript('/map.js', function(){
                    $("#mapjs").each(function(i) {
                        eval($(this).text());
                    });
                });
            }
            $('#contentx').fadeIn('slow');
        });
    });
    return false;
});

The 'hacky' way? You could change your <script id="mapjs"> to be <div id="mapjs" style="display:none;">...</div> . This wouldn't then be removed from the DOM, and you could use eval() on the text.

Answer 3

I would say that you problem is caused by the same origin policy

It is even mentioned in the documentation for $.load

You may simply check debug console in Firefox or Chrome for related error message.

For example in Firefox there will be reported something like:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://maps.google.com . (Reason: CORS header 'Access-Control-Allow-Origin' missing).