Theme OL

Add pjax to the website without refreshing, and keep the music of page changing uninterrupted

ZTOL ZBlog Development Tutorial 2023-07-07 2 thousand and 700 two

After adding the floating music player to the blog, it has been struggling with the uninterrupted function of page changing music. After searching on the Internet, it was found that you must add pjax to the blog to realize the uninterrupted function of page changing music. So it was hard to find and try again. Finally, it was found that there are basically two ways to realize the function of pjax on the Internet.

Method 1

 <script src=" https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js "></script> <script src=" https://cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.min.js "></script> <script>     $(document).pjax('a[href^="{$host}"]:not(a[target="_blank"], a[no-pjax])', {         container: '#pjax-container',         fragment: '#pjax-container',             timeout: 8000     }) </script>

Put the above code at the bottom of the footer file foot.php or footer.php.

Explain the above code: {$host} is a built-in function of zblog, calling the home page address of the site! That is to say, only the links on this site that do not have the _blank attribute and do not contain no ajax in the tag are subject to pjax! The partially refreshed area is part of # pjax container!

The # pjax container is your local refresh part. You may not have this div. You can add a<div id="pjax container"></div>to wrap the part you want to refresh locally!

Method 2

 <script src=" https://cdn.jsdelivr.net/npm/pjax/pjax.js "></script> <script>     var pjax = new Pjax({   Elements: "a",//The elements or containers that need to be replaced when PJAX is performed on the page, one CSS selector for each, in array form     selectors: [          "title",  "Meta [name=description]",//If you want to replace all meta, you only need to write meta "main"       ],       cacheBust: false     }) </script>

As in the first method, place the above code at the bottom of the footer file foot.php or footer.php.

The partially refreshed area is the main part!

Main is your local refresh part. You may not have this div. You can add a<div id="main"></div>to wrap the part you want to refresh locally


Comment

 User profile tourist
There should be applause here~

Comment List

QQ Online Customer Service

customer service

Online time Morning: 09:00-12:00 Afternoon: 14:00-21:00