Quando clicco su un link con un’ancora su desktop, la pagina scorre fino a quel punto. Tuttavia, su mobile (Android, FF e Chrome) l’ancora viene rimossa dall’URL, quindi non avviene lo scorrimento verso quel punto.
Cosa sto cercando di fare:
Abbiamo un lungo documento di linee guida e FAQ che deve contenere link agli intestazioni. Poiché Discourse rimuove i parametri id, ho creato un semplice componente tematico che utilizza attributi dati personalizzati nel documento di destinazione e ascolta le ancore nell’URL per scorrere fino all’elemento con l’attributo dati corrispondente.
Funziona su desktop!
Tuttavia, su mobile, le ancore sembrano essere rimosse, così quando si arriva alla pagina di destinazione non avviene lo scorrimento verso l’elemento corretto. E ovviamente, con un documento lungo, è proprio su mobile che hai più bisogno di questa navigazione.
Ho notato che le ancore generate dal componente Indice funzionano* quando vengono aperte in un nuovo link. Non vengono rimosse dall’URL e il browser scorre fino al punto corretto.
Qualcuno ha suggerito di usare i parametri di query invece. Sembra che questi non vengano rimossi sui dispositivi mobili. Ma, incredibilmente, vengono rimossi sul desktop.
Non uso Android, quindi non posso testarlo, ma ho usato i link agli header molte volte e funzionano perfettamente sul mio iPhone. Sono curioso di sapere perché stai usando gli anchor id invece di collegarti direttamente all’header che desideri?
Vedi quel -13 alla fine? È lì perché è la tredicesima intestazione. Appena aggiungi una nuova intestazione più in alto nel documento, il collegamento si rompe. E ovviamente se cambi il testo dell’intestazione, si rompe.
Quando dico “si rompe”, intendo cambiamenti nel documento di destinazione. Per quanto posso capire, quegli ancoraggi vengono generati dinamicamente quando la pagina viene caricata. Quindi se stai usando il plugin TOC, modificare il documento non è un problema.
Nel nostro caso d’uso, si tratta di un FAQ a cui si fa riferimento. Quindi non è raro aggiungere nuove domande/intestazioni.
Ma hai ragione a dire che Discourse sembra rilevare il modello di quegli ancoraggi e li permette. Ma se non corrisponde al modello previsto, viene rimosso.
Sono semplicemente ID alfanumerici ordinari. Quindi se volessi creare un ancoraggio per il tuo esempio sopra, userei semplicemente cloudflare-r2.
Nei miei test, il parser Markdown rimuove gli attributi name. Questo è alla radice del mio primo problema.
Tuttavia, il problema che sto segnalando in questa discussione è che anche se riuscissi a far funzionare quell’ancora, su mobile il #cloudflare-r2 viene rimosso. Questo non accade su desktop.
Ah, capisco, sì, sembra che l’editor di testo ricco rimuova questi elementi, ma l’editor Markdown non lo fa… nell’editor ricco penso che tu debba racchiuderlo in un div per preservare l’HTML
L’ho già provato. Il testo viene comunque rimosso durante la formattazione. Inoltre, non posso contare sul fatto che in futuro qualcuno non utilizzi l’editor Markdown.
Ho inserito l’HTML sopra nell’editor di testo ricco per fare una prova. Vediamo cosa succede…