如何将深层链接添加到 HTML5 Up 模板中？答案

【问题标题】：How can I add deep links into an HTML5 Up template?如何将深层链接添加到 HTML5 Up 模板中？
【发布时间】：2016-10-10 22:19:47
【问题描述】：

我正在使用以下 HTML5 Up 模板： https://html5up.net/lens

...我希望能够从外部站点链接到幻灯片放映中的特定幻灯片。

如何向模板添加深层链接？

【问题讨论】：

标签： javascript html templates

【解决方案1】：

你需要通过javascript切换幻灯片，模板就是这样搭建的。

首先，您拥有的链接有一个指向 https://html5up.net/uploads/demos/lens/ 的 iframe - 查看那里的代码，您会发现库 main.js 声明了一个 main 对象。

使用此main，您可以按如下方式切换幻灯片：

main.switchTo(number);

其中 number 是幻灯片的编号。

现在，您需要在 javascript 中处理 url 参数并使用它们来调用它。为此，请从How can I get query string values in JavaScript? 获取代码并在页面加载后立即运行它。

看起来像这样：

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

$(document).ready(function(){
   var slideNumber = getParameterByName('slideNumber');
   if(slideNumber !== null)
   {
       main.switchTo(parseInt(slideNumber, 10));
   }
});

然后您应该能够通过将 ?slideNumber=1 形式的查询字符串添加到 url 来触发该代码。

【讨论】：