Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

pjax刷新区域的选择。 #111

Open
ventusoon opened this issue May 10, 2022 · 5 comments
Open

pjax刷新区域的选择。 #111

ventusoon opened this issue May 10, 2022 · 5 comments

Comments

@ventusoon
Copy link
Contributor

作者大大，最近又在折腾博客，加了一些动态元素，但是每次跳转页面都会刷新，导致动画元素、或者后台歌曲重新加载。

后来无意中发现了pjax，经过一番折腾也实现了无刷新加载。

我的操作如下：

extended_head.html下引入

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>

<script>
  $(document).pjax('a[target!=_blank]', '#pageContent', {fragment: '#pageContent'});
</script>

用<div id="pageContent"></div>包裹刷新区域，不想刷新的区域用了其他的内容划分。

但是奈何才疏学浅，刷新区域的选择还是有问题，导致某些应该正常加载的页面不加载了：

1.Overview下的Post activity、以及贡献图不加载了；

2.post页面下的目录失效，点击无反应；

3.gitalk不刷新。

想请教我的哪些思路出了问题，又或者作者大大能不能给出更好的方案。 感恩😋
@MeiK2333
Copy link
Owner

你可以尝试一下 iframe 的方式

@ventusoon
Copy link
Contributor Author

你可以尝试一下 iframe 的方式

研究了一会会儿，还是不会用😭

@MeiK2333
Copy link
Owner 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body style="margin:0; padding:0;overflow:hidden">
<iframe src="http://www.luvsia.com/" frameborder="0"
        style="overflow:hidden;height:100%;width:100%;position:absolute;top:0;left:0;right:0;bottom:0"
        height="100%" width="100%"></iframe>
<!--
在这里写你想保持的内容，比如音乐等
-->
</body>
</html>

大概这样

@ventusoon
Copy link
Contributor Author 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body style="margin:0; padding:0;overflow:hidden">
<iframe src="http://www.luvsia.com/" frameborder="0"
        style="overflow:hidden;height:100%;width:100%;position:absolute;top:0;left:0;right:0;bottom:0"
        height="100%" width="100%"></iframe>
<!--
在这里写你想保持的内容，比如音乐等
-->
</body>
</html>

大概这样
c62ba995801d73d45082c9ddf4f412b

重影。。。

@MeiK2333
Copy link
Owner

可以研究一下 html 的基本操作等

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ventusoon @MeiK2333