search

MoePlayer / APlayer-Typecho

在线音乐播放器插件 for typecho 1.0
https://i-meto.com/meting-typecho/
MIT License
483 stars 89 forks source link

请教PJAX 页面切换问题 #49

Closed AtlasChiu closed 6 years ago

AtlasChiu commented 6 years ago

Typecho 用的支持PJAX的主题（NOTE主题），具体应该怎么实现页面切换后歌曲停止，重新加载？

需要视情况在主题设置中添加回调函数 停止播放

if (typeof aplayers !== 'undefined'){ for (var i = 0; i < aplayers.length; i++) { try {aplayers[i].destroy()} catch(e){} } }

重载播放器

loadMeting();

具体怎么使用，希望能指导一下！ 每个文章中歌曲均不同，目前页面切换始终在播放首次播放的音乐，除非重新刷新页面。

metowolf commented 6 years ago

请在 footer.php 中做如下修改

<script data-no-instant>        
InstantClick.on('change', function() {
    Waves.displayEffect();
    $('pre code').each(function(i, block){
        hljs.highlightBlock(block);
    });
    otherFunction();
    $('code.hljs').each(function(i, block){
        hljs.lineNumbersBlock(block);
    });
    loadMeting(); // <-- reload Meting.JS
});
InstantClick.init();
</script>

测试在 https://github.com/Weic96/Note-Typecho v1.0 版本上通过 通常 pjax 主题应当开放回调函数设置，如果没有就只能修改源码了。

AtlasChiu commented 6 years ago

`<?php if (!defined('TYPECHO_ROOT_DIR')) exit; ?>

<?php $this->footer(); ?> 

<script src="<?php $this->options->themeUrl('js/jquery.pjax.js'); ?>" data-no-instant></script>
<script src="<?php $this->options->themeUrl('js/highlight.pack.js'); ?>" data-no-instant></script>
<script src="<?php $this->options->themeUrl('js/highlightjs-line-numbers.js'); ?>" data-no-instant></script>
<script src="<?php $this->options->themeUrl('js/waves.min.js'); ?>" data-no-instant></script>
<script src="<?php $this->options->themeUrl('js/jquery.fancybox.js'); ?>" data-no-instant></script>
<script src="<?php $this->options->themeUrl('js/main.js'); ?>" data-no-instant></script>

<script type="text/javascript">
        var windowW = ($(window).width());
        var windowH = ($(window).height());
        var page_loading_mainTop = (windowH - 80) / 2;
        var page_loading_mainLeft = (windowW - 80) / 2;
        $(".page-loading-main").css({
            "top":page_loading_mainTop,
            "left":page_loading_mainLeft
        })
        $(".page-loading-one").css("background-color","#5998e6");
        $(".page-loading-two").css("background-color","#b3f788");
        $('.page-loading').fadeOut();
</script>
<script data-no-instant>
    hljs.initHighlightingOnLoad();
    hljs.initLineNumbersOnLoad();
    Waves.displayEffect();
    otherFunction();
    $(document).pjax('a', '#pjax-container', {fragment:'#pjax-container', timeout:8000}).on('pjax:send', function() {
        $('.page-loading').fadeIn();
    }).on('pjax:complete', function() {
        $('pre code').each(function(i, block){
            hljs.highlightBlock(block);
        });
        $('code.hljs').each(function(i, block){
            hljs.lineNumbersBlock(block);
        });
    }).on('pjax:end', function() {
        $('.page-loading').fadeOut();
        otherFunction();
    });
InstantClick.on('change', function() {
    Waves.displayEffect();
    $('pre code').each(function(i, block){
        hljs.highlightBlock(block);
    });
    otherFunction();
    $('code.hljs').each(function(i, block){
        hljs.lineNumbersBlock(block);
    });
    loadMeting(); // <-- reload Meting.JS
});
InstantClick.init();
</script>

` 这样改不知对不对？问题依旧，问题页面 请帮忙看看，感谢！

FlickerMi commented 6 years ago 
<script data-no-instant>        
InstantClick.on('change', function() {
    loadMeting(); // <-- reload Meting.JS
});
InstantClick.init();
</script>

重载Meting.JS即可

if1y commented 5 years ago

用了 Pjax ，要刷新才会出现播放器，以上代码使用后还是要刷新。 要怎么改呢？

MiChongGET commented 4 years ago

用了 Pjax ，要刷新才会出现播放器，以上代码使用后还是要刷新。 要怎么改呢？

老哥这个bug你解决了吗？，现在使用https://github.com/AlanDecode/Typecho-Theme-VOID 这个主题出现了这个bug