首頁猿問使用 turbolink...

使用 turbolink 以編程方式打開 Bootstrap 選項卡

JavaScript

慕田峪9158850 2022-08-18 16:33:19

我正在嘗試在頁面加載后打開Bootstrap 4選項卡。如果我刷新頁面，它確實有效，但是如果我在站點內導航，我會收到一個查詢選擇器空錯誤。這是我的代碼，這基本上是我 https://webdesign.tutsplus.com/tutorials/how-to-add-deep-linking-to-the-bootstrap-4-tabs-component--cms-31180 做的一個移植，因為我使用的是Bootstrap-native，所以我不得不用vanilla Javascript重寫它。 document.addEventListener("turbolinks:load", function() { let url = location.href.replace(/\/$/, ""); if (location.hash) { const hash = url.split("#"); document.querySelector('#nav-tab a[href="#'+hash[1]+'"]').Tab.show(); url = location.href.replace(/\/#/, "#"); history.replaceState(null, null, url); setTimeout(() => { window.scrollTo(0,0); }, 400); } });我把它放在結束身體標簽之前。如果我寫入并單擊刷新，則頁面刷新和選項卡將更改，但是如果我從（turbo）鏈接到達那里，則找不到要查詢選擇的選項卡?？峙聠栴}出在“load”事件上，我嘗試了不同的方法，但我無法讓它工作。http://www.myURL#mytab

查看完整描述

1 回答

皈依舞

TA貢獻1851條經驗獲得超3個贊

如果要將此代碼包含在末尾的中，則可能不需要偵聽該事件。為什么？在第一次加載時，瀏覽器將能夠查詢位于腳本元素之前的任何元素。在 Turbolinks 上，加載腳本時將有權訪問頁面上所有呈現的元素。<script><body>turbolinks:load<body>

值得補充的是，通過調用 body 元素，偵聽器將在每次后續頁面加載時調用，而不僅僅是在呈現腳本的頁面上。如果后續頁面加載中不存在這些元素，您將看到該錯誤。更重要的是，如果你在多個頁面上包含腳本，那么監聽器就會一次又一次地重復，這可能不是你想要的！document.addEventListener("turbolinks:load", …)<script>#nav-tabquerySelector

因此，解決問題的第一步是刪除事件偵聽器。我們將你的代碼包裝在一個立即調用的函數中，以防止污染全局范圍：

;(function() {

let url = location.href.replace(/\/$/, "");

if (location.hash) {

const hash = url.split("#");

document.querySelector('#nav-tab a[href="#'+hash[1]+'"]').Tab.show();

url = location.href.replace(/\/#/, "#");

history.replaceState(null, null, url);

setTimeout(() => {

window.scrollTo(0,0);

}, 400);

}

})();

接下來要知道的是，Turbolinks管理自己的訪問頁面緩存，因此當用戶點擊“返回”時，將從此緩存中呈現頁面。為此，它有一個系統可以添加到瀏覽器自己的堆棧中。如果您繞過Turbolinks系統，并自己調用（或），那么您最終可能會破壞“返回”導航。Turbolinks沒有記錄在案的手動添加到其歷史記錄堆棧的方法，但您可以嘗試以下操作：historyhistory.replaceStatehistory.pushState

;(function() {

let url = location.href.replace(/\/$/, "");

if (location.hash) {

const hash = url.split("#");

document.querySelector('#nav-tab a[href="#'+hash[1]+'"]').Tab.show();

url = location.href.replace(/\/#/, "#");

Turbolinks

.controller

.replaceHistoryWithLocationAndRestorationIdentifier(url, Turbolinks.uuid())

setTimeout(() => {

window.scrollTo(0,0);

}, 400);

}

})();

請注意，這是未記錄的，因此可能不會在將來的版本中公開提供。

最后，可能值得考慮將此代碼段包含在主應用程序 JavaScript 捆綁包中，并將其加載到而不是正文中。在這種情況下，您需要使用'turbolinks：load處理程序。它可能看起來像這樣：<head>

document.addEventListener('turbolinks:load', function () {

let url = location.href.replace(/\/$/, "");

const hash = url.split("#");

const navLink = document.querySelector('#nav-tab a[href="#'+hash[1]+'"]')

if (location.hash && navLink) {

navLink.Tab.show();

url = location.href.replace(/\/#/, "#");

Turbolinks

.controller

.replaceHistoryWithLocationAndRestorationIdentifier(url, Turbolinks.uuid())

setTimeout(() => {

window.scrollTo(0,0);

}, 400);

}

});

反對回復 2022-08-18

1 回答
0 關注
100 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 turbolink 以編程方式打開 Bootstrap 選項卡

使用 turbolink 以編程方式打開 Bootstrap 選項卡

1 回答

添加回答