Bigsu

Typecho 用原生JS实现加载更多文章
PHP部分将原来的分页导航改成如下<div class="pager"> ...
扫描右侧二维码阅读全文
22
2019/08

Typecho 用原生JS实现加载更多文章

PHP部分

将原来的分页导航改成如下

<div class="pager">
    <?php $this->pageLink('加载更多文章','next'); ?>
</div>

CSS部分

pager {
  width: 100%;
  height: 40px;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}
.pager .next {
  cursor: pointer;
  box-sizing: border-box;
  cursor: pointer;
  transition: color 0.4s, background-color 0.4s;
  line-height: 40px;
  width: 150px;
  height: 40px;
  font-size: 18px;
  color: #d2d2d2;
  text-align: center;
  text-decoration: none;
}
.pager .next:hover {
  color: #999999;
  cursor: pointer;
}

JavaScript部分

添加监听&屏蔽默认事件
通过 class 的名称来获取“加载更多文章”的 DOM节点,并给该节点添加 click 事件的 Listener

const load = document.getElementsByClassName('next')[0]
load.addEventListener("click", function (e) {
}

屏蔽a标签点击后跳转的默认事件,并将文字内容改为 “正在努力加载”

e.preventDefault() // prevent <a> default action
load.innerText = "正在努力加载"

发送 ajax 请求

获取下一页的文章地址,当地址存在,即有下一页时,发送 ajax 请求

let ajax = new XMLHttpRequest()
    let href = load.href
    if (href != undefined) {
        ajax.open('get', href)
        ajax.send()
    }

获取响应内容

监听 ajax 请求的状态,当请求成功时,将文字内容改回 “加载更多文章”

然后使用 DOMParser.parseFromString 方法,将 ajax 请求的响应解析为 HTML 的 DOM 树,这是方便使用 JavaScript 用 DOM操作来获取下一页的文章内容并将它插入到当前页

    ajax.onreadystatechange = function () {
    if (ajax.readyState==4 && ajax.status==200){
        load.innerText = "加载更多文章"
        let data = (new DOMParser()).parseFromString(ajax.responseText, "text/html")
    }
}

获取文章&判断是否存在下下页

获取下一页的文章,通过 "post-preview" 这个类名来逐一获取文章,
判断是否存在下下页,如果不存在,则将“加载更多文章”移除

let postlist = data.getElementsByClassName("post-preview")
let newhref = data.getElementsByClassName('next')[0]
if (newhref != undefined) {
    href = newhref.href
} else {
    load.remove() 
}

插入文章

将获取到的文章逐一插入到类名为 "post-preview-container" 文章列表中

let container = document.getElementsByClassName("post-preview-container")[0]
let count = postlist.length
for (let i=0; i < count; i++){
    postlist[0].classList.add("post-up")
    container.appendChild(postlist[0])}

汇总

const load = document.getElementsByClassName('next')[0]
if (load != undefined){
load.addEventListener("click", function (e) {
    e.preventDefault() // prevent <a> default action
    load.innerText = "正在努力加载"
    let ajax = new XMLHttpRequest()
    let href = load.href
    if (href != undefined) {
        ajax.open('get', href)
        ajax.send()
        ajax.onreadystatechange = function () {
            if (ajax.readyState==4 && ajax.status==200){
                load.innerText = "加载更多文章"
                let data = (new DOMParser()).parseFromString(ajax.responseText, "text/html") // parse String to dom 
                let postlist = data.getElementsByClassName("post-preview")
                let container = document.getElementsByClassName("post-preview-container")[0]
                let newhref = data.getElementsByClassName('next')[0]
                if (newhref != undefined) {
                    href = newhref.href
                } else {
                    load.remove() // if no more articles, remove the button
                }
                let count = postlist.length
                for (let i=0; i < count; i++){
                    postlist[0].classList.add("post-up")
                    container.appendChild(postlist[0])
                }
            } 
        }
    }
})
}

Last modification:August 27th, 2019 at 10:16 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment