jQuery .load() but exclude script tags

Question

I am using the following jQuery to load in 5 pages into the current page

$('.main').load('main.cfm');
$('.bu1').load('bu1.cfm');
$('.bu2').load('bu2.cfm');
$('.bu3').load('bu3.cfm');
$('.bu4').load('bu4.cfm');

But each .cfm has the following script tags in them

            <script src="js/jquery.speedometer.js"></script> 
            <script src="js/jquery.jqcanvas-modified.js"></script> 
            <script src="js//excanvas-modified.js"></script> 
            <script>
            $(function(){
                $('#MDTQ').speedometer({
                    backgroundImage: "url(speedo/background-r.png)",
                    maximum: 15,
                    scale: 15,
                    suffix: ''
                });

                $('.changeSpeedometer').click(function(){
                    $('#MDTQ').speedometer({ percentage: $('.speedometer').val() || 0 });
                });
            });
            </script>

Is there a way to remove the below from the pages below whilst being loaded?

$('.bu1').load('bu1.cfm');
$('.bu2').load('bu2.cfm');
$('.bu3').load('bu3.cfm');
$('.bu4').load('bu4.cfm');

Thanks

See the section on script execution: api.jquery.com/load — Jason P
– Jason P, Commented Jul 25, 2013 at 14:14
@JasonP the script tags are inside the body of each page not head — ngplayground
– ngplayground, Commented Jul 25, 2013 at 14:15

adeneo · Accepted Answer · 2013-07-25 14:59:56Z

5

As load is a shortcut for $.get with the convenience of automagically inserting the content for you, you can use that and filter out the script tags before inserting the content yourself:

$.get('bu1.cfm', function(html) {
     var markup = $($.trim(html));
     markup.find('script').remove();

     $('.bu1').html(markup);
});

EDIT:

to filter by src:

$.get('bu1.cfm', function(html) {
     var markup = $($.trim(html));
     $('script[src]', markup).remove();
     $('.bu1').html(markup);
});

edited Jul 25, 2013 at 14:59

answered Jul 25, 2013 at 14:15

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

3 Comments

adeneo Over a year ago

@DonaldSutherland - I wrote the selector wrong, maybe it works now ?

ngplayground Over a year ago

just getting back Error: Syntax error, unrecognized expression:[entire html page]

adeneo Over a year ago

Made some changes, try that !

user400654 · Accepted Answer · 2013-07-25 15:04:15Z

1

use $.get with the relatively new $.parseHTML method.

$.get('bu1.cfm', function(html) {
    var markup = $.parseHTML(html);
    $('#bu1').html(markup);
});

by default $.parseHTML will remove any script tags within the markup.

If you instead want to only remove scripts that have a src attribute, use the 2nd attribute then filter the results.

$.get('bu1.cfm', function(html) {
    var markup = $($.parseHTML(html,true));
    var scripts = markup.find("script").addBack().filter("script");
    scripts.filter("[src]").remove();
    $('#bu1').html(markup).append(scripts);

});

edited Jul 25, 2013 at 15:04

answered Jul 25, 2013 at 14:19

user400654

95.1k16 gold badges168 silver badges188 bronze badges

3 Comments

ngplayground Over a year ago

Is there a way to target the files with the src in them as I have script files with jquery in them i need

user400654 Over a year ago

Yes, use the second parameter, then filter them down similar to how adeneo's answer does.

ngplayground Over a year ago

the true you have in the first line throws me an error SyntaxError: missing formal parameter

jroot · Accepted Answer · 2013-07-25 16:01:57Z

0

Not sure if using a regexp might be a consideration: Note: I used a div with a specific id instead of a class to test on. Also, my test file was a complete html document. I've not worked with cfm before, but perhaps the concept is the same.

$(function() {
    $.ajax({type: "GET",
        url: "yourfile.cfm", 
        dataType: "html",    
        error:function() { alert("error") },
        success:  function(data) {
            $("#main").html(data.replace(/<script[^>]*>[\w\W]*?<\/script>/g,""));
        }});
});

answered Jul 25, 2013 at 16:01

jroot

3201 silver badge10 bronze badges

Collectives™ on Stack Overflow

jQuery .load() but exclude script tags

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related