Thêm một trục thời gian cho blog

Gần đây, trong khi đang tìm kiếm hướng dẫn trên blog của Trương Khắc, tôi tình cờ phát hiện ra rằng trang about của anh ấy có một trục thời gian rất thú vị. Tôi đã thử sử dụng công cụ F12 để xem mã nguồn và cố gắng tạo lại hiệu ứng giống như vậy, nhưng không thành công dù đã cố gắng nhiều lần. Khi bắt đầu cảm thấy nản chí và quyết định từ bỏ để tìm kiếm các script khác, thật may mắn là tôi đã tìm thấy đoạn mã hoàn chỉnh của trục thời gian này trong kho tài liệu của Trạm trưởng (Chủ nhà trang web). Không cần phải nói thêm về cách tôi làm thế nào để thực hiện nó, tôi sẽ trực tiếp chia sẻ đoạn mã mà tôi đang sử dụng. Thành thật mà nói, tôi đã mất gần nửa ngày để hoàn thiện cái trục thời gian này.

iframe

1

// Gọi html vào trang chỉ định <iframe id="mainFrame" name="mainFrame" scrolling="no" src=" frameborder="0" style="padding: 0px; width: 100%; height: 1000px;"></iframe>

JavaScript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43


// Bắt đầu điều chỉnh kích thước chiều cao của phần tử iframe theo chiều cao của trang gọi startInit('mainFrame', 160);
var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
var isFireFox = browserVersion.indexOf("FIREFOX") > -1[99ceo Tặng Code](https://www.w3vm.com/wm/1031.html) ? 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);
}

Nhận diện thiết bị di động và chuyển hướng đến trang chỉ định

1
2
3
4


// Khi truy cập bằng điện thoại, tự động chuyển hướng đến trang chủ
if (/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {[9win game](https://www.w3vm.com/wm/1034.html)
    window.location = "địa chỉ mới"; // Thay địa chỉ mới ở đây
}

Những điểm còn hạn chế

Chiều rộng của iframe chưa thể tự điều chỉnh theo kích thước màn hình.
Cần chỉnh sửa nhật ký của trang con thủ công thông qua FTP (Có lẽ cần sự giúp đỡ từ các chuyên gia để thiết kế một hệ thống quản trị backend cho phép chỉnh sửa trực tiếp từ giao diện quản trị?).
Khi mở hoặc gập lại, các phần tử dưới trang con có xu hướng nhảy khung như bị giật lag.

Nguồn mã gốc: Tài nguyên của Trạm trưởng
Địa chỉ demo: Blog ghi chép của tôi