2023年12月3日 星期日

用CSS讓頁面的footer即使內容高度不夠的情況下也可以永遠保持在下方

用CSS在Body上加上下面的屬性

	
    body{
	  display: grid;
	  grid-template-rows: auto 1fr auto; /* 自動大小的header、撐滿內容的主體、自動大小的footer */
	  min-height: 100vh; /* 當內容高度不足時,也可以撐開整個頁面的高度 */
	  margin: 0;
	}
    

2023年10月28日 星期六

使用embeddedfolderview把google drive雲端硬碟的資料夾嵌入網頁內

如果單純只是要用iframe把google的雲端硬碟嵌入網頁內,可以使用以下語法
語法中的{GoogleFolderShareId}指的就是分享google drive取得的網址內的參數
網址後方接上#grid那麼網頁上瀏覽時就會是以預覽小圖的方式呈現,如果把#grid拿掉那麼就會是以列表的方式呈現
<iframe src="https://drive.google.com/embeddedfolderview?id={GoogleFolderShareId}#grid" style="min-height:100vh;" height="100%" width="100%" frameborder="0" marginheight="0" marginwidth="0">載入中…</iframe>
另外一個可以使用object,好處是當假設目錄是公開的,則任何登入 Google 的人都會看到該目錄的資料夾視圖。否則,就會看到替代的文字鏈接「點擊此連結查看目錄內容」:
<object data="https://drive.google.com/embeddedfolderview?id={GoogleFolderShareId}#grid" width="100%" style="height:100vh" >點擊<a href= "https://drive.google.com/drive/folders/{GoogleFolderShareId}">此連結</a>查看目錄內容</object>

2023年9月18日 星期一

再Chrome上關閉單獨input欄位的autocomplete

在chorme上 html內的input加上autocomplete=off並不能禁止該欄位不自動輸入, google後得到可解決的方案如下: 只需將自動完成設置為獨特的即可。如:"autocomplete="new-user-email"
<input class="textInput" id="useremail" name="useremail" autocomplete="new-user-email" type="text"/>
google chrome team的回覆如下:
autocomplete=off 禁用自動完成,但保持自動填充啟用。
autocomplete=garbage 禁用自動填充,但保持自動完成啟用。
自動填充嘗試根據您在 chrome://settings/autofill 中保存的數據填寫表單。
自動完成嘗試根據先前在字段中輸入的值來填充字段。 參考此篇:https://bugs.chromium.org/p/chromium/issues/detail?id=1434624