Question

我正在使用此代码段插件：http://www.steamdev.com/snippet/用于我的博客但该插件不适用于页面加载。它仅适用于首页刷新。

我使用jquery.ajax请求将我的内容加载到特定的div中，并且我尝试了这个：

$(window).on("load", function(){ 
  $("pre.cplus").snippet("cpp",{style:"acid"});
  $("pre.php").snippet("php",{style:"acid"});
  });

我也尝试触发加载事件，但我不知道它是否正确..

另一个问题：我使用php字符串构建我的html，例如：

$string = '<pre class="cplus">  
           #include <iostream>   
           int main()
           {
            //c++ code             
           }           
           </pre>

           <pre class="php">
           <?php
           function foo()
           {
            // PHP code
           }
           ?>
           </pre>';

echo $string;   // ajax -> success

但PHP代码段显示为空（c ++没问题）。在我的页面上显示php代码片段的任何其他方式（或插件）？谢谢。

解决：问题不在于插件或Iserni建议..我在页面加载（ajax）中遇到了问题.. 这是我加载页面的方式：

function pageload(hash) {
    if(hash == '' || hash == '#php')
    {
      getHomePage();
    }

    if(hash)
    {
     getPage();
    }

} 


function getHomePage() {
    var hdata = 'page=' + encodeURIComponent("#php");
    //alert(hdata);
    $.ajax({
        url: "homeloader.php",  
        type: "GET",        
        data: hdata,        
        cache: false,
        success: function (hhtml) { 
            $('.loading').hide();               
            $('#content').html(hhtml);
            $('#body').fadeIn('slow');      

        }       
    });
}

function getPage() {
    var data = 'page=' + encodeURIComponent(document.location.hash);
    //alert(data);
    $.ajax({
        url: "loader.php",  
        type: "GET",        
        data: data,     
        cache: false,
        success: function (html) {  
            $('.loading').hide();               
            $('#content').html(html);
            $('#body').fadeIn('slow');      

        }       
    });
} 

 $(document).ready(function() {

 // content
   $.history.init(pageload);    

    $('a[href=' + window.location.hash + ']').addClass('selected');

    $('a[rel=ajax]').click(function () {

        var hash = this.href;
        hash = hash.replace(/^.*#/, '');
        $.history.load(hash);   

        $('a[rel=ajax]').removeClass('selected');
        $(this).addClass('selected');
        $('#body').hide();
        $('.loading').show();

        getPage();

        return false;
    }); 
    // ..... other code for menus, tooltips,etc.

我知道这是实验性的，我已经混合了各种教程，但现在它有效.. 评论非常感谢.. 谢谢大家。

Answer 1

PHP代码段似乎是空的，因为浏览器认为它是一种HTML标记。

而不是

$string = '<pre class="php">
       <?php
       function foo()
       {
        // PHP code
       }
       ?>
       </pre>';

你需要这样做：

// CODE ONLY
$string = '<?php
       function foo()
       {
        // PHP code
       }
       ?>';

// HTMLIZE CODE
$string = '<pre class="php">'.HTMLEntities($string).'</pre>';

至于jQuery，可能是因为你把jQuery代码放在哪里：试着把它放在页面底部，如下所示：

....
<!-- The page ended here -->
<!-- You need jQuery included before, of course -->
<script type="text/javascript">
    (function($){ // This wraps jQuery in a safe private scope
        $(document).ready(function(){ // This delays until DOM is ready

        // Here, the snippets must be already loaded. If they are not,
        // $("pre.cplus") will return an empty wrapper and nothing will happen.
        // So, here we should invoke whatever function it is that loads the snippets,
        // e.g. $("#reloadbutton").click();

        $("pre.cplus").snippet("cpp",{style:"acid"});
        $("pre.php").snippet("php",{style:"acid"});

        });
    })(jQuery); // This way, the code works anywhere. But it's faster at BODY end
</script>
</body>

更新

我认为你可以通过合并两个页面加载函数来保存和简化一些代码（它被称为 DRY 原则 - 不要重复自己）：

function getAnyPage(url, what) {
    $('.loading').show(); // I think it makes more sense here
    $.ajax({
        url: url,
        type: "GET",        
        data: 'page=' + encodeURIComponent(what),
        cache: false,
        success: function (html) { 
            $('.loading').hide();
            $('#content').html(hhtml);
            $('#body').fadeIn('slow');
        }
        // Here you ought to allow for the case of an error (hiding .loading, etc.)
    });
}

然后您可以将调用更改为getPage，或者将它们重新实现为包装器：

function getHomePage(){ return getAnyPage('homeloader.php', "#php"); }
function getPage()    { return getAnyPage('loader.php', document.location.hash); }

Answer 2

好的，我建议的第一个问题

查看您的JS错误控制台说什么
确保加载了对应的js插件文件
并在使用ajax时使用以下代码（关键是“成功”事件函数）：

$.ajax({
          url: 'your_url',
          success: function(data) {
            $("pre.cplus").snippet("cpp",{style:"acid"});
            $("pre.php").snippet("php",{style:"acid"});
          }
});

第二期lserni回答清楚

Answer 3

你需要使用jquery on load函数，如下所示：

$(function(){
  RunMeOnLoad();
  });

加载时的jquery代码片段

3 个答案:

更新