作者Gold740716 (项为之强)
看板PttWeb
标题[情报] 自制 BBSJS 原型程式
时间Thu Mar 15 23:09:58 2018
# 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/cn.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