javascript - 在 ajax 请求后重新初始化 processing.js 草图

Question

我想重新启动我链接到头部的样式和 processing.js 脚本，以便它们在通过 ajax 请求引入时正确显示。我看到此代码需要在 ajax 请求中的什么位置，但我不知道如何告诉代码简单地重新应用脚本。我见过有人使用 getScript() 来执行此操作，但据我所知，这会重新加载脚本，而不是简单地告诉它重复或重新启动。所有的脚本都需要自己重新初始化吗？我找到了语法荧光笔 .highlight() 方法，但我还没有加载处理脚本。目前，Processing.loadSketchFromSources($('#processing'), ['mysketch.pde']); 不起作用。我正在使用所有库的当前版本。很惊讶我还没有找到答案，因为很多人似乎都有同样的问题。感谢您的帮助!

索引页:

    $(document).ready(function () {
    // put all your jQuery here.

        //Check if url hash value exists (for bookmark)
    $.history.init(pageload);   
        //highlight the selected link
    $('a[href=' + document.location.hash + ']').addClass('selected');
        //Search for link with REL set to ajax
    $('a[rel=ajax]').live("click",function(){
                //grab the full url
        var hash = this.href;
                //remove the # value
        hash = hash.replace(/^.*#/, '');
                //for back button
        $.history.load(hash);   
                //clear the selected class and add the class class to the selected link
        $('a[rel=ajax]').removeClass('selected');
        $(this).addClass('selected');
                //hide the content and show the progress bar
        //$('#content').hide();
        $('#loading').show();
        //run the ajax
        getPage();
        //cancel the anchor tag behaviour
        return false;

    }); 
});


function pageload(hash) {
    //if hash value exists, run the ajax
    if (hash) getPage();    
}

function getPage() {

    //generate the parameter for the php script
    var data = 'page=' + encodeURIComponent(document.location.hash);
    $.ajax({
        url: "loader.php",  
        type: "GET",        
        data: data,     
        cache: false,
        success: function (html) {  

            //hide the progress bar
            $('#loading').hide();   

            //add the content retrieved from ajax and put it in the #content div
            $('#content').html(html);

            //display the body with fadeIn transition
            $('#content').fadeIn('fast');
            //reapply styles?

            //apply syntax highlighting. this works
            SyntaxHighlighter.highlight();
//relaod processing sketch, currently displays nothing
            Processing.loadSketchFromSources($('#processing'), ['mysketch.pde']);
        }       
    });
}

这是 ajax 加载的内容:

    <!--ajax'd content-->
    <??>
    <h2>code</h2>
    <pre class="brush: php">
    $last_modified = filemtime("header.php");
    echo("last modified: ");
    echo(date("m.j.y h:ia", $last_modified));
    </pre>
    <script type="application/processing">
    </script>
    <canvas data-processing-sources="mysketch.pde" id="processing">
    </canvas>
    </div>

</body>
</html>
<??>

Answer 1

那么，让我们分析一下当您包含(外部或内部)Javascript 代码时通常会发生什么:它将自动仅执行全局范围内可用的代码。 “好的”脚本只会将一个命令添加到全局范围，然后该命令将在函数/方法中的某处执行初始化代码。

您需要做的就是查看外部 Javascript 文件并从全局范围内找出正在执行的内容。对此没有统一的答案……一些脚本使用一个对象并调用它的 init() 方法……但这完全取决于开发人员的想象力。