想起以前讀大學時有個比賽,是為學校招生網站提出建議。在截止日將近時,我和一位同學才決定組隊參賽 (被大獎吸引,好像是 $5000 百佳現金券呢,最後我們對半分了),然後飛快兩三日內趕一份建議書出來。

建議書包含不少修改參考圖,其製作方式多是修改網頁的 HTML 或直接使用 Bookmarklet 編輯網頁內容,再截圖。

* Bookmarklet 是將一段 JavaScript 保存為 Bookmark, 然後需要用到時,點擊 Bookmark 運行,達到想要的效果。

執行效果

以下這段 JavaScript, 保存成 Bookmark ,點擊便能用它隨意修改當前網頁的內容了。

javascript:document.body.contentEditable = true; document.designMode='on'; void 0;

除了這做法外,也可以簡單 F12 然後在 Console 裡輸入這段 JavaScript, 效果一樣。

關閉效果

你可能會發現某些語詞底下會有波浪線,這是拼字檢查所致。關掉編輯效果便可以了。

javascript:document.body.contentEditable = false; document.designMode='off'; void 0;

References

The WHATWG Blog — The Road to HTML 5: contentEditable

Differences between designMode and contentEditable | nagoon97’s Weblog (wordpress.com)

Recommended Posts

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments