假设我有一个单页网站,我想等到加载下面的任何内容(使用ajax),直到用户点击链接转到同一页面上的该内容。但是,我不希望禁用JavaScript的用户只看不到任何内容。使用ajax加载内容的全部原因是初始页面加载速度更快,因此以任一方式加载内容然后隐藏,直到用户点击将毫无意义。我确信如果启用了JavaScript,只能加载内容,但如果在浏览器中启用JavaScript,是否可以不加载特定的“静态”或服务器端生成的内容?
如果在浏览器中启用了JavaScript,有没有办法阻止服务器在初始页面加载时加载特定的静态内容?
答案 0 :(得分:2)
您可以考虑使用noscript标记。
<body>
<h1>Above the fold header</h1>
<video src="fancy-cat.mp4" ... />
<div id="below-the-fold">
<noscript>
<!-- Users with Javascript disabled get this content -->
<h2>My cat plays piano</h2>
<video src="piano-cat.mp4" ... />
<h2>My cat knows how to use the toilet</h2>
<video src="potty-cat.mp4" ... />
</noscript>
</div>
然后,您可以使用javascript在页面加载时复制这些<noscript>
标记的内容,并将它们插入到DOM中。
noscript标记的innerHTML
属性将返回HTML的编码字符串。但您可以使用方便的花花公子Encoder脚本将其转换为DOM所需的内容。
<script src="http://www.strictly-software.com/scripts/downloads/encoder.js"></script>
<script>
$(window).load(function() {
// Copy the 'noscript' contents into the DOM
$("noscript").each(function() {
$(this).after(Encoder.htmlDecode($(this).html()));
});
});
</script>
</body>
或者,如果“首屏”内容实际上是图像/视频重叠,您可能只想考虑Lazy Loading内容。
答案 1 :(得分:1)
如果您想在启用JS的客户端的情况下避免加载数据,那么您可能必须结合服务器端和客户端技术。
这可以作为粗略指南。 披露 - 我没有测试任何这个!
例如,如果您的网站结构如下所示:
/
page1.jsp
fragment1_1.jsp
fragment1_2.jsp
page2.jsp
fragment2_1.jsp
fragment2_2.jsp
...
然后page1.jsp看起来像这样(如果您不了解JSP和jQuery,请道歉,但这主要是伪代码):
<%!
// Define a method to help us import fragments into the current page.
// Conditional import of fragment based on isJSEnabled
void myImport (String fragment, boolean isJSEnabled, HttpServletResponse res) {
if (!isJSEnabled) {
// output fragment contents directly to response
String contents = // get contents of fragment
res.getWriter().write(contents);
}
}
%>
<%
// How to work out if JS is enabled on the server-side?
// Not sure it can be done. So need to be told by the browser somehow.
// Maybe a request parameter. So if param not present, assume no JS.
boolean isJSEnabled = (null != req.getParameter("js"));
%>
<html>
<head>
<script>
// Try and redirect to JS version of page as soon as possible,
// if we're not already using the JS version of the page.
// This code does not take into account any existing request parameters for
// the sake of brevity.
// A browser with JS-enabled that was incrementally downloading and parsing
// the page would go to the new URL.
if (window.location.href.indexOf("js=true") < 0) {
window.location.href += "?js=true";
}
</script>
</head>
<body>
<h1 class="fragment_header" data-fragment-id="fragment1_1">Fragment 1</h1>
<div>
<%
// Conditionally import "fragment1_1".
myImport("fragment1_1", isJSEnabled);
%>
</div>
<h1 class="fragment_header" data-fragment-id="fragment1_2">Fragment 2</h1>
<div>
<%
// Conditionally import "fragment1_2".
myImport("fragment1_2", isJSEnabled);
%>
</div>
<script>
// For each fragment header, we attach a click handler that loads the
// appropriate content for that header.
$(".fragment_header").click(function (evt) {
var header = $(evt.target);
// Find the div following the header.
var div = header.next("div");
if (div.children().length < 1) {
// Only load content if there is nothing already there.
div.load(header.attr("data-fragment-id") + ".jsp");
}
});
$("a").click(function (evt) {
// Stop the browser handling the link normally.
evt.preventDefault();
// Rudimentary way of trying to ensure that links clicked use the
// js=true parameter to keep us is JS mode.
var href = anchor.attr("href");
var isLocalHref = // logic to determine if link is local and should be JS-ified.
if (isLocalHref) {
href = href + "?js=true";
}
window.location.href = href;
});
</script>
</body>
</html>
浏览到page1.jsp的用户最初会获得静态版本,尽管支持JS的浏览器会尽快切换到启用JS的版本。
当我们将点击处理程序附加到所有链接时,我们可以控制下一页的加载。如果在某些时候关闭JS,则js = true参数不会附加到每个href
,用户将恢复为静态页面。