# BBSJS 原型概念版 * 原文： http://gholk.github.io/bbsjs.html BBSJS 是由 BBSLua 啟發，在用測覽器上 ptt 時， 執行 ptt 文章內 javascript 的計劃。 ## 使用方法 在文章內按 J 即可執行文內的 bbsjs； 如果是用小書籤，就是直接在文章內點擊小書籤執行。 目前可以在 ptt chrome、term.ptt.cc 或其它類似介面下使用， ptt 網頁版也可以動。 使用 ptt chrome、term.ptt.cc 等， 建議在 ptt chrome 內右鍵，開啟選項內的好讀模式， 讓 bbsjs 就算超過一頁，也能一次全部載入執行。 ## 安裝 目前發布 [[小書籤]] bookmarklet 和 [[Greasemonkey]] 腳本二種執行方法。 grease monkey 是一種簡易的瀏覽器腳本，安裝後在特定的網域執行。 小書籤則是類似書籤，只是點擊時不是前往該網站，而是在現在頁面下執行程式。 ### grease monkey 需安裝 grease monkey， chrome 下可以試 Tampermonkey， 目前最新版 [托管在 gist 上][gist user.js] ， 使用 grease monkey 者可以點 [gist 上的 raw 按鈕][gist install] 安裝。 [gist user.js]: https://gist.github.com/GHolk/3154e8486cf987cf6ab84cae45c7dcc7 [gist install]: https://gist.github.com/GHolk/3154e8486cf987cf6ab84cae45c7dcc7/raw/112a45b553f0b1989ec2208a8eb09013cfcdad58/bbsjs.user.js ### 小書籤 bookmarklet firefox 使用者可以直接點擊本文網頁版中的此處超連安裝， 如果跳出 *是否在側邊欄開啟* ，請不要勾選。 如果點擊什麼事都沒發生，請在上述超連結右鍵， 手動複製連結內容後從書籤列加入。 ## bbsjs api bbsjs 會抓取文章內第一個 script 或 html 標籤， 整個寫入到 iframe 中，如同把 script 存成 html 檔後開啟， 並在網頁裡執行 script 內容。 裡面可以用 document.write、alert confirm prompt， 甚至操作 dom，與使用者互動。 如果在此頁面按網頁版、ptt chrome、term.ptt.cc 上按 J 或用小書籤執行，應該會執行下面這段 code 。 <script> /* javascript */ alert('hello world!') var username = prompt('what is your name?') document.write('good bye ' + username) </script> 如果是 `html` 可以直接寫 html 元素， 甚至用 `<script src="https://some.script">` 引入其它 javascript， 就和平常寫網頁一樣。 但這段 html 不會執行，因為我加了空格， 就會轉而執行第一段 `<script>` 。 < html> <meta charset="utf-8"> <pre id="markdown-raw"> # write your markdown here this **markdown** is power by [gholk/marked] . [gholk/marked]: http://github.com/gholk/marked/ </pre> <div id="markdown-html"></div> <script src="https://gholk.github.io/marked/marked.min.js"></script> <script> const raw = document.querySelector('#markdown-raw').textContent const html = marked(raw) document.querySelector('#markdown-html').innerHTML = html </script> </ html> 要用 ajax 的話要設好 cors， 在 iframe 的 context 裡沒有任何網址是 same origin。 （自己 document.write(location.href) 就知道了。） 要注意是網址不要簡寫成 `src="//some.script"` ， 因為該 iframe scheme 是在 `blob:` ，要寫 `https://` 。 ## 版本歷程 以下版本從新排到舊。 目前還在很簡陋的階段， 只讓程式可以動而已，實現概念玩玩看。 程式也沒有和 ptt chrome 互動， 是直接從 html 裡抓出文章內的 script， 再用 css 把執行結果放在頁面中央。 未來期望可以整合進 ptt chrome， 把 script 執行結果直接插到 ptt chrome 的好讀版內。 ### 原型說明頁 在一開始的 iframe 加入首頁也就是說明頁面， 還加了一個會在 iframe 內開啟的說明頁的超連結。 * [gist]( https://gist.github.com/GHolk/3154e8486cf987cf6ab84cae45c7dcc7/112a45b553f0b1989ec2208a8eb09013cfcdad58 ) * *小書籤請到網頁安裝* ### iframe 原型 bbsjs 正式發布友善可用的原型了！ 把 bbsjs 在原分頁內用 iframe 載入， 並有按鈕開啟、收合 iframe。 把和有的沒的元素 style 都放在 `body > div#bbsjs-container` 內， 用了很多 jquery。 目前是用 `URL.createObjectURL` 和 `iframe.src` 載入腳本， 因為 grease monkey 的 script 不能寫入 `iframe.contentDocument` ， 二者被判為不同 origin，只好用這種奇怪的方法。 * [gist]( https://gist.github.com/GHolk/3154e8486cf987cf6ab84cae45c7dcc7/e3d4baa929c756a6e2911eb2b25c716975ec22f1 ) * *小書籤請到網頁安裝* ### [分頁原型] bbsjs 會在新開的頁面載入。這本的 user.js 不能用， 後來發現是下一版 iframe 原型那個 same origin 的雷， `*.user.js` 和原本頁面不是 same origin。 * [gist]( https://gist.github.com/GHolk/3154e8486cf987cf6ab84cae45c7dcc7/52642d32989748e6e88d20d96fcddc79cd08e21c ) * *小書籤請到網頁安裝* ## BBSLua 以前 ptt 有一個在文章內嵌入 lua 程式， 讓使用者可以執行 lua 互動。 目前在 ptt2 可以使用 bbslua， 但因為 lua 還是要在 ptt 伺服器上執行， 考量效能 ptt1 負載已經很重，就沒有引進到 ptt1。 如果是 javascirpt 就能在瀏覽器上執行，不會再增加 ptt 負擔。 而且現在用瀏覽器上 ptt 的人數也增加了， 像 BBSFOX 或 ptt chrome，甚至 ptt 官方也開放用 websocket 從 <https://term.ptt.cc/> 上 ptt。 安裝 bbsjs 後，就能直接在瀏覽器上執行 bbsjs。 ## 問題回報與討論 如果要報 bug 或提功能建議， 目前建議在 gist 下留言，或在本文下面討論亦可。 -- 一位記者問總理：「請問總理先生，現在的中國人都窮吧？」不少人納悶：怎麼提這種問題？大家都關注總理怎樣回答。總理肯定地說：「不是的！」全場嘩然，議論紛紛。總理看出了大家的疑惑，補充說了一句：「當官的不窮。」頓時掌聲雷動。總理的機智打動了在場的所有人，掌聲經久不息。 --

※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 140.116.252.148 ※ 文章網址: https://webptt.com/m.aspx?n=bbs/PttWeb/M.1521126610.A.A07.html ※ 編輯: Gold740716 (140.116.252.148), 03/15/2018 23:12:36 ※ 編輯: Gold740716 (140.116.252.148), 03/15/2018 23:14:01 ※ 編輯: Gold740716 (140.116.252.148), 03/15/2018 23:16:18