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

reinitialize processing.js sketch after ajax request

本文关键字:初始化 processing js 草图 ajax 请求      更新时间:2023-09-26

我想重新点燃我链接到头部的样式和处理.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>
<??>

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

你所需要做的就是查看外部Javascript文件并找出从全局作用域执行的内容。这个问题没有普遍的答案……一些脚本使用一个对象并调用它的init()方法…但这完全取决于开发者的想象力。

如果你有javascript需要触发,你必须添加到head元素:

var head = document.head || document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.innerHTML = "your AJAX-obtained js code";
head.appendChild(script);

同样的技巧适用于CSS。在头部添加一个元素,CSS声明为innerHTML。因此:请确保预处理AJAX响应并分离JavaScript和CSS元素,然后将它们添加到文档标题中。将响应设置为JSON对象可能更容易,如下所示:

{
    html: "<html>string<goes>here</goes></html>",
    scripts: ["url1","url2","url2",...],
    style: ...
}

然后解析JSON的html(你使用作为innerHTML为一个新的document.createElement("div")或其他东西,然后追加任何需要追加),脚本(你变成元素的头部插入)和样式声明(你变成元素的头部插入)。

(在功能上,你的示例AJAX响应看起来像它里面有PHP代码。我不知道你在用它做什么,但这看起来像一个糟糕的响应)

以防有人偶然发现:

如果您已经加载了processing.js,只需在AJAX成功/完成函数中调用Processing.reload()

也许您的页面上已经有一个带有id="processing"的元素。在这种情况下,$("#processing")将只返回第一个。如果是这种情况,请更改id或使用类。

另一个选项,我不推荐,是使用$("[id=processing]")。这将返回带有id="processing"的页面上的每个元素。但是,不要使用它。在您的页面中使用唯一的id,或者切换到使用类,以最适合您的方式。