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

【问题标题】：reinitialize processing.js sketch after ajax requestajax 请求后重新初始化 processing.js 草图
【发布时间】：2011-12-01 11:32:11
【问题描述】：

我想重新启动我在头部链接到的样式和 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>
<??>

【问题讨论】：

你现在可以添加你的代码，否则答案永远不会出现......
第二，仍然：如果你有一些JS在Ajax请求之前运行，然后你向DOM添加一些东西，显然它不会受到前面代码的影响。
所以我想我的问题是如何让 .js 再次触发？我自己也许能弄清楚。

标签： javascript ajax jquery processing.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果您有需要触发的 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（您将其用作新 document.createElement("div") 的 innerHTML 或其他内容，然后在需要附加的任何地方追加）、脚本（您将其转换为 HEAD 的元素插入）和样式声明（您将其转换为 HEAD 插入的元素）。

（在功能说明上，您的示例 AJAX 响应看起来其中包含 PHP 代码。我不知道您使用它的目的是什么，但这看起来像是一个糟糕的响应）

【讨论】：

我很困惑。我的“响应”是一个 php 页面，而不是这个页面当前与服务器交互，但我希望有一天能这样做。还对“您的 ajax 获得的代码”的意思或为什么我想要一个 html 字符串感到困惑，我已经得到了正确的页面。我也从来没有弄乱过JSON，这有必要吗？感谢您的所有帮助。
您的响应包含 PHP 代码没有多大意义，因为浏览器不会“执行”PHP。像 "$var" 和 "echo" 这样的东西只是文本字符串，浏览器不会对它们做任何事情，所以它们不会对任何 processing.js 或样式相关的东西做出贡献。如果要根据通过 AJAX 请求获得的内容刷新 processing.js 和样式，则必须返回正确的响应：一个整齐地分隔为 html（用于正文）、css 样式（用于

【解决方案3】：

以防万一有人偶然发现：

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

【讨论】：

这是让脚本运行所必需的我接受它吗？
是的，这将运行初始化程序以从您的data-processing-sources 的data-processing-sources 属性中指定的.pde 文件中运行草图@

【解决方案4】：

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

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

【讨论】：

这是一个巧妙的技巧，但并没有解决我的困境。当我转到 code.php 时，草图显示良好，但当我通过 ajax 导航到它时从不显示，即使它需要运行的所有内容都在页面中。这让我觉得 ajax 请求中的某些东西破坏了它。