简体   繁体   English

如何在Reuters.com上加载不同的页面?

[英]How to load different pages like on Reuters.com?

If you read an article on Reuters.com and scroll down to the bottom of the page, another article will show up, and the url changes. 如果您在Reuters.com上阅读了一篇文章并向下滚动到页面底部,则会显示另一篇文章,并且URL也会更改。 If you scroll back you see the previous page, with the previous url. 如果向后滚动,则会看到具有上一个URL的上一页。

I have just three php pages that I would like to load one after the other, as one scrolls down the page. 我只有三个php页面,我想一个接一个地向下滚动,因为一个页面向下滚动。 Is there a clean way to do that? 有没有一种干净的方法可以做到这一点?

Something like: 就像是:

Page1: 第1页:

<code of Page1>
<append Page2 code>

Page2: 第2页:

<code of Page2>
<append Page3 code>

Infinite scroll libraries, like jquery-ias don't seem to support such behavior, or at least I don't see how. 像jquery-ias这样的无限滚动库似乎不支持这种行为,或者至少我不知道如何。

History Web API in Infinite Scroll Interface. 无限滚动界面中的History Web API。

Live demo - Source code 现场演示 - 源代码

This can be achieved with Infinite Ajax Scroll with the history extension . 可以通过带有历史记录扩展名的 Infinite Ajax Scroll来实现。

In your case you would need a link to the next article at the bottom of the article. 根据您的情况,您需要在文章底部找到下一篇文章的链接。 Use this link in the configuration of IAS. 在IAS的配置中使用此链接。 Then when you scroll down, IAS will load the next page and update the url. 然后,当您向下滚动时,IAS将加载下一页并更新URL。

See a demo . 观看演示

This worked for me: 这为我工作:

  1. Add placeholder divs at the end of the page: 在页面末尾添加占位符div:
 <div id="2nd"></div> <div id="3rd"></div> 
  1. This jquery script: 这个jQuery脚本:

     $("#2nd").load("all.php"); $("#3rd").load("target.php"); 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM