# 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://www.ptt.cc/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