Question

我试图弄清楚如何加载内容而不刷新facebook这样的导航栏。

如果您查看Facebook个人资料（不是时间轴），左栏中会有一个导航栏，其中包含“墙”，“信息”，“照片”，“朋友”等。

例如，当您点击“墙”时，网址会变为www.facebook.com/yourid?sk=wall，中间列会刷新并加载内容。但这不会刷新左侧导航栏（也是顶部菜单栏）。

这是如何运作的？

我正在开发一个php网站，其中包含类似这样的网址www.example.com/profile.php?id=1234，这是带导航栏的主页面，当用户创建网页时，网址会变为www.example.com/profile.php?id=1234&page=1。如何在不刷新导航栏部分的情况下加载&page=1内容？

======================================

我从标题中删除了（没有javascript）。我认为facebook没有javascript，但我错了。

Answer 1

首先，我很确定facebook使用javascript，因为它是客户端，这就是你可以做你想做的事情。通过在浏览器中禁用javascript然后再次尝试来测试它。

PHP是服务器端，因此如果您想刷新页面的一位，整个页面必须被发送回服务器，因为它将决定要刷新哪个部分。

你可以做的是使用iframe。带有菜单的iframe，带有内容的iframe，那么您只能刷新内容iframe。虽然，由于种种原因，我并不是真正的框架粉丝。使用Jscript会更好：）

<强>更新

几年以来，单页应用程序（完全在浏览器中运行的Web应用程序，无需在服务器上进行完全刷新）已经大大增加了。

基本上，您使用像Angular或React这样的前端javascript框架来编写应用程序代码。结果将是一个非重新加载的单页网站。

Answer 2

正如已经评论过的，这是用JavaScript完成的。 PHP是一种服务器端语言，因此您的客户端会处理这样的效果。 Facebook使用JavaScript，其中很多都是为了在网站上实现各种效果。

Answer 3

我认为您可以使用iframe执行此操作 - 您的主要个人资料页面将包含iframe - 主网址将为www.example.com/profile.php?id=1234，当用户点击您的链接时，只有iframe会重新加载网址{{1 }}

导航链接将保持不变。

Answer 4

var iDiv = document.createElement('div');
iDiv.id = 'newDiv';//give u'r div an id
document.getElementsByTagName('body')[0].appendChild(iDiv); //append the div    to   your html body 
$( "#newDiv" ).insertAfter( $( "#nameOfDiv" ) ); 
                 //moving it after your desired div(which is nameOfDiv here) 
$('#newDiv').load('somePage.php'); //load desired page in newDiv 
//or 
$('#newDiv').html('some text here')

您希望将自己的网址看作www.example.com/profile.php?id=1234&page=1。请看看 http://tutorialzine.com/2009/09/simple-ajax-website-jquery/这非常有帮助。

php - 如何在不刷新导航栏的情况下加载内容

4 个答案: