jQuery .load() 但排除脚本标签答案

【问题标题】：jQuery .load() but exclude script tagsjQuery .load() 但排除脚本标签
【发布时间】：2013-07-25 14:10:57
【问题描述】：

我正在使用以下 jQuery 将 5 个页面加载到当前页面中

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

但每个.cfm 中都有以下script 标签

            <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>

有没有办法在加载时从下面的页面中删除下面的内容？

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

谢谢

【问题讨论】：

参见脚本执行部分：api.jquery.com/load
@JasonP script 标签在每个页面的正文内而不是头部

标签： jquery jquery-load

【解决方案1】：

由于 load 是 $.get 的快捷方式，它可以方便地为您自动插入内容，您可以在自己插入内容之前使用它并过滤掉脚本标签：

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

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

编辑：

按src过滤：

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

【讨论】：

@DonaldSutherland - 我写错了选择器，也许现在可以使用？
刚回来Error: Syntax error, unrecognized expression:[entire html page]
做了一些改变，试试吧！

【解决方案2】：

将$.get 与相对较新的$.parseHTML 方法一起使用。

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

默认情况下$.parseHTML 将删除标记中的所有脚本标签。

如果您只想删除具有 src 属性的脚本，请使用第二个属性然后过滤结果。

$.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);

});

【讨论】：

有没有办法定位带有src 的文件，因为我需要其中有带有 jquery 的脚本文件
是的，使用第二个参数，然后将它们过滤掉，类似于 adeneo 的答案。
第一行中的true 给我一个错误SyntaxError: missing formal parameter

【解决方案3】：

不确定是否可以考虑使用正则表达式：注意：我使用具有特定 id 的 div 而不是要测试的类。另外，我的测试文件是一个完整的 html 文档。我以前没有使用过cfm，但也许这个概念是一样的。

$(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,""));
        }});
});

【讨论】：