给博客添加了一个时间轴

前段时间在张戈博客找教程的时候，偶然发现他的博客about页面有个时间轴，我觉得挺好玩的，就F12扒了一下，结果死活弄不出同样的效果，打算放弃，寻找别的脚本。一番搜索，居然在在站长之家的素材库里发现了这个时间轴的完整代码，好了，具体怎么折腾的我就不写了，直接放上我正在使用的代码，我是不会告诉你，我做这个时间轴前前后后花了将近半天时间。

iframe

//在指定页面调用html
<iframe id="mainFrame" name="mainFrame" scrolling="no" src="https://eveaz.com/timeline/" frameborder="0" style="padding: 0px; width: 100%; height: 1000px;"></iframe>

js

//指定iframe元素自适应调用页面高度
startInit('mainFrame', 160);
var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);
var isIE9More = (! -[1, ] == false);
function reinitIframe(iframeId, minHeight) {
try {
var iframe = document.getElementById(iframeId);
var bHeight = 0;
if (isChrome == false && isSafari == false)
bHeight = iframe.contentWindow.document.body.scrollHeight;

var dHeight = 0;
if (isFireFox == true)
dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
else if (isIE == false && isOpera == false)
dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
else if (isIE == true && isIE9More) {//ie9+
var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
if (heightDeviation == 0) {
bHeight += 3;
} else if (heightDeviation != 3) {
eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
bHeight += 3;
}
}
else//ie[6-8]、OPERA
bHeight += 3;

var height = Math.max(bHeight, dHeight);
if (height < minHeight) height = minHeight;
iframe.style.height = height + "px";
} catch (ex) { }
}
function startInit(iframeId, minHeight) {
eval("window.IE9MoreRealHeight" + iframeId + "=0");
window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
}

识别手机并跳转到指定页面

//手机访问iframe调用页面自动跳转到主页
if( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location = "https://eveaz.com/"; //这里改地址
}

不足

1、iframe宽度未能够自适应
2、需要在FTP里手动修改子页面的日志记录(不知是否有大神帮忙设计一套后台，可以在后台直接编辑？)
3、展开折叠的时候导致子页面下方元素像跳帧一样，一卡一卡的。

源码出处：站长素材
演示地址：我的博客折腾记录