我对网络技术的经验非常少,只知道基本的HTML和CSS。我有一个任务,我应该评估一个网站,并确定可以帮助改善网站的网络技术。我想弄清楚的第一件事是我选择的那个是多页还是单页应用程序。我一直在谷歌搜索几个小时的代码,这是SPA的“典型”代码,但除此之外还没有找到任何其他代码:
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Single Page Sliding Layout - Design Shack Demo</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="https://designshack.net/favicon.ico">
<link rel="icon" href="https://designshack.net/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
这是否表明它是SPA?还是我完全偏离轨道?如果有帮助,这是网站:http://www.mrbottles.com/
谢谢!
/即将把头发拉出来的人
先导
有一点是摆脱困境:有单页应用程序和单页网站。虽然两者都有相似之处,但是有区别。
单页网站是一个试图将所有内容放在一个页面上的网站,您通常会滚动浏览页面以进入其他部分,并且通常会有一个粘性导航跟随您并告诉您您所在的部分。另外点击导航通常是一个锚点链接,它会让你在页面上跳转到没有重新加载的部分(这可以不用javascript完成)。
当页面交互或导航发生时,单页应用程序通常以两种形式出现。一种风格是URL中会有一个#
,其中#
字符后面的内容会在交互时发生变化。单击锚点时,这类似于单页网站,除了内容通常是动态加载而不是页面滚动到页面的某个部分。另一个使用称为浏览器历史状态的东西。 javascript能够在不重新加载窗口的情况下更改页面的路径。
你为什么在乎?你的任务是什么,你想要完成什么?大多数人都关心知道某个网页是否是SPA,因为他们确定了他们的产品是否可以与客户的网站一起使用的可行性。最终,您想知道内容是否是动态加载的。如果您的产品修改了页面上的内容但内容正在发生变化,那么在SPA导航/内容更改时,没有真正好方法可以再次关闭代码。如果不知道原因,就很难回答这个问题,但我会尝试覆盖范围很广。
没有真正说明您是否尝试手动检测或以编程方式检测SPA。不幸的是,没有可以设置的标志,只是因为你发现一个框架并不意味着它被用来使页面成为一个SPA。
检测SPA最直接的方法是手动检查它。
Steps to Manually Detect SPA这可能很复杂,因为SPA可以挂钩事件,甚至可以防止它们冒泡或传播,如果您正在尝试收听以确定该页面是否为SPA。
以下是我提出的一些检测SPA的想法。
当窗口导航时,您可以确定即将进行重新加载。此时您可以说该页面不是SPA。如果您进行了互动并希望重新加载,但没有,那么您就拥有SPA。
window.onbeforeunload = function(event) {
var text = 'Not a SPA!';
event.returnValue = text;
return text;
};