部落格園文章自定義的圖片放大功能失效修復
阿新 • • 發佈：2021-11-10
前言
好一陣子沒逛部落格園了, 今天回自己部落格搜點東西發現圖片放大功能不好使了(不是之前lightbox效果了),感覺很奇怪,難道部落格園樣式升級連這個功能都給我遮蔽了?
當時記錄的博文:部落格園文章圖片點選放大功能升級 - 習慣沉澱 - 部落格園 (cnblogs.com)
解決
第一感覺是部落格園升級把引入的js遮蔽了,F12發現罪魁禍首是所有的a標籤都被強行加了屬性:
因為這段js是自己定義的, 被部落格園加上rel屬性後語法錯誤, img標籤未按預期加上a標籤, 功能自然也失效了.原始碼:
方案一: 在核心程式碼給img包裹a標籤處手動加上rel
既然被強行加上rel屬性, 那我自己先加上還不行嗎?
"<a rel='nofollow' href='"+$(this).attr("src")+"' data-lightbox='example-set'></a>"
然並卵, 還是會被強制新增rel="nofollow"
方案二:投機一下
發現個規律, rel屬性都是a標籤的第一個屬性, a標籤被強行加上rel屬性, 那如何識別a標籤的?能不能把<a拆開拼接?轉念一想即使拆開拼接後, 結果不一樣是<a麼?
行不行試一下先:
結果竟然成功給img包裹a標籤了
表示迷門, 有夥伴知道的還望告知一下, 觸及到知識盲區了
擴充套件
作者：習慣沉澱
如果文中有誤或對本文有不同的見解，歡迎在評論區留言。
如果覺得文章對你有幫助，請點選文章右下角【推薦】一下。您的鼓勵是博主的最大動力！
掃碼關注一線碼農的學習見聞與思考。
回覆"大資料"，"微服務"，"架構師"，"面試總結"，獲取更多學習資源！