更改 url 并更新页面内容而无需重新加载

Posted 2023-02-19

【中文标题】更改 url 并更新页面内容而无需重新加载

【英文标题】：Change url and update content of page without reload

【发布时间】：2016-02-01 22:50:38

【问题描述】：

这与我最后一年的 Web 开发项目有关。我想在不重新加载页面的情况下更改页面的内容-我知道这可以使用 css /ajax 或 jquery 来实现，但这只能通过 jquery 中的隐藏和显示或 replaceWith() 来实现。 我希望网址也可以更改。我想实现类似这个页面https://www.khanacademy.org/computing/computer-programming - 当用户点击 INTRO TO JS:Drawing and Animation 时，你会看到页面的 url 和内容发生变化，但页面不会重新加载。

指南将不胜感激。谢谢

一个小草稿：

**MY header.php**

<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script>
$(function()
	$("a[rel='tab']").click(function(e)
		//e.preventDefault(); 
		/*	
		if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
		if commented, html5 nonsupported browers will reload the page to the specified link. 
		*/
		
		//get the link location that was clicked
		pageurl = $(this).attr('href');
		
		//to get the ajax content and display in div with id 'content'
		$.ajax(url:pageurl+'?rel=tab',success: function(data)
			$('#content').html(data);
		);
		
		//to change the browser URL to 'pageurl'
		if(pageurl!=window.location)
			window.history.pushState(path:pageurl,'',pageurl);	
		
		return false;  
	);
);
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() 
	$.ajax(url:location.pathname+'?rel=tab',success: function(data)
		$('#content').html(data);
	);
);
</script>
<div id='menu'>
	<a rel='tab' href='http://localhost/html5-history-api/menu1.php'>menu1</a> | 
	<a rel='tab' href='http://localhost/html5-history-api/menu2.php'>menu2</a> | 
	<a rel='tab' href='http://localhost/html5-history-api/menu3.php'>menu3</a></div>

我的 menu1.php（menu2 和 3 的代码相同）

<?php 
if($_GET['rel']!='tab')
	include 'header.php';
	echo "<div id='content'>";

?>
menu1 content in menu1.php
<?php 
if($_GET['rel']!='tab')
	echo "</div>";
	include 'footer.php';
?>

当我点击链接时，我想要 - 链接消失，它只显示“menu1.php 中的菜单 1 内容”之类的内容，页面上没有其他内容

【问题讨论】：

您要更改网址并且不会重新加载整个页面？

查看***.com/questions/824349/…

查看 Angular JS，更具体地说，查看名为 Single page applications (SPA) 的概念。 Gmail、facebook 等现在都在使用相同的架构

@JohnReyM.Baylen ：是的，状态可以推送到 URL 而无需重新加载页面。

@JohnReyM.Baylen 是的，约翰它会更改 url 并更改页面内容而无需重新加载

【参考方案1】：

我相信我从链接站点复制粘贴的这个脚本解释了它们如何替换 url。为了跟踪位置，他们使用 localStorage 来跟踪页面位置和其他内容。转到页面并导航到您引用的链接。然后打开控制台并输入 localStorage。当您按香蕉时，您会看到我在说什么。

你可以这样做

localStorage.setItem( "itemName", item )
localStorage.getItem( "itemName" )

以下是源码

<script type="text/javascript">
(function() 
        // If we arrived via a Facebook callback, it might have appended #_=_
        // to our URL. This can confuse our Backbone routers, so get rid of it.
        // http://***.com/questions/7131909/facebook-callback-appends-to-return-url
        if (window.location.hash === "#_=_")
            if (history.replaceState) 
                history.replaceState(null, null,
                        window.location.href.split("#")[0]);
             else 
                window.location.hash = "";
            
        
    )();
</script>

【讨论】：

确实如此，这只是他们页面上的一个示例。重要的信息是他们所做的这个版本是如何完成的。这些方法允许存储信息并从用户计算机的 localStorage 中调用信息。然后，您可以使用该信息来记住内容。使用 ajax 调用将 page.html 注入视图，并使用 FB 外观代码编辑 window.location。还动态注入 DOC。它的一组功能不是 1。我将发布一个带有 js / jquery 方法集的 github repo 来完成此任务，但我非常忙。启动时会向您发送消息。点就是您所需要的

【参考方案2】：

如果您使用的是 chrome 浏览器，只需右键单击该 div 并使用选项“检查元素”。这些是 Web 开发人员的便捷工具。你提到的链接只是一个超链接，因为它是同一域下非常简单的静态页面，使用相同的资源（css，js），它的加载速度非常快，你会得到一个没有页面加载的印象。

【讨论】：

是的，这让我感到困惑-我确实尝试了检查元素，但没有看到任何 ajax 或 jquery，它们只是简单的 div