Question

我想重新设置我在头部链接的样式和processing.js脚本，以便在通过ajax-request引入时正确显示。我看到这个代码需要在ajax请求中的哪个位置，但我不知道如何告诉代码只需重新应用脚本。我见过人们使用getScript（）来做这件事，但是我可以告诉他重新加载脚本，而不是简单地告诉它重复或重新发送。所有脚本都需要自己重新初始化吗？我找到了语法highlighters .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（）方法......但这完全取决于开发人员的想象力。

Answer 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: ...
}

然后为html解析那个JSON（你用它作为innerHTML用于新的document.createElement（“div”）或其他东西，然后追加到需要追加的地方），脚本（你转为HEAD的元素）插入）和样式声明（您将其转换为HEAD插入的元素）。

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

Answer 3

只是因为任何人绊倒了这个：

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

Answer 4

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

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

在ajax请求之后重新初始化processing.js sketch

4 个答案: