[建議] 3.0改版 改為在網站做一個iframe然後在裡面顯示套件
zoosewu opened this issue · comments
你的提案是因為發生某些問題嗎?
隨著套件功能越來越多，越來越容易跟原本的網站出現衝突以及css汙染。
你期待的改進方案
讓網站本身只嵌入顯示套件的按鈕，套件本身塞進去一個iframe。
其他內容
新的架構中間層我的構想是這樣
然後顯示套件的地方就用http://blank.org/這個網站
這樣就可以盡可能地避免套件跟網站互相干擾
控制iframe大小就能調整套件尺寸
也可以更方便的在holodex的grid-item內嵌入套件
這還在構想階段，
所以沒做任何測試或開發。
目前想到的問題有下面幾個:
- MessagePoster要重構
現在這一塊只有做單層的傳輸，只能設定一個傳資料的對象(向上的frame或向下的frame)。
之後中間套件層會同時向上傳送寬高更改的資料，以及向下傳爬蟲的資料。
所以重構之後MessagePoster要可以有一個預設的傳送對象，還有次要傳送對象。
然後可能會順便把傳資料的方法改用RESTful API或GraphQL - iframe可能會出其他問題
- iframe跟bootstrap的collapse的功能不知道會不會出問題
有什麼問題或想法都可以先提出來
我也不清楚這樣可不可行
你的提案是因為發生某些問題嗎?
隨著套件功能越來越多，越來越容易跟原本的網站出現衝突以及css汙染。
跟原本網站的衝突是因為css的關係，把bootstrap底下的scss全套上id應該就能解決？
其他內容
控制iframe大小就能調整套件尺寸
iframe大小 -> 頁面切出來的大小，最後還是要根據iframe調整聊天室的大小。
也可以更方便的在holodex的grid-item內嵌入套件
這應該沒有比較方便吧？只是把原本的chat的部分改成iframe而已。
我是覺得如果scss套上id就能解決的話維持原樣應該就可以了，如果用iframe也只是把原本chat的部分抽換掉而已，調整大小之類的方式還是沒變。
現在bootstrap的維護其實越來越麻煩，而且這兩者還是會互相影響，能做到的只是把影響盡可能的縮小或讓它不明顯。
而且套上id之後權重是會改變的，像是.table可能原本權重比另一個低，可是換成#PTTChat .table後就可能反而權重變高，那要變回原本的樣子就要再額外去做調整。
又例如說之前開了bootstrap的model後，有人發現要投SC卻沒辦法操作，後來才發現是套件css的問題。但是直觀上來講很難簡單的搞清楚為什麼這部分會發生問題，所以很有可能有更多人有這個問題卻不知道是我們套件導致的而沒回報。
(他重新安裝另一個瀏覽器後依然發生一樣的問題，才一個套件一個套件測試，最後發現是這個然後回報給我)
然後holodex我目前嵌入是有點小失敗的，他不知道為什麼會把最下面的東西擠掉，我還在找原因跟調整css做測試。
以往塞在新網站我都只能祈禱塞進去剛好沒衝突，有問題的話只能再去改css然後還要檢查舊的網站會不會受影響。
這一類的問題只要用iframe就可以全部一勞永逸，以後套件內容就可以專注在套件內容，不用再額外測試網站本身的衝突或影響。而網站嵌入也只要考慮按鈕跟iframe的位置大小就好，只要能塞空的iframe就能保證套件能在上面正常顯示。
不過不清楚用iframe後還能不能像原本在Youtube上那種懸浮的樣子。而且這樣改的工量好像不小，我會再繼續測試嵌入的效果，如果能很好的塞進去的話，這個方案應該就會棄用或等未來有一天有必要的時候再考慮吧。
而且套上id之後權重是會改變的，像是
.table可能原本權重比另一個低，可是換成#PTTChat .table後就可能反而權重變高，那要變回原本的樣子就要再額外去做調整。
我對css沒有很熟但#PTTChat.table的scope不是僅限於<id="PTTChat">內部嗎？外部的css應該不會被更動到吧。
又例如說之前開了bootstrap的model後，有人發現要投SC卻沒辦法操作....(略
我覺得應該是因為原本網站的css沒加上id讓之後加上的css覆蓋掉原本的設定了。
然後holodex我目前嵌入是有點小失敗的，他不知道為什麼會把最下面的東西擠掉，我還在找原因跟調整css做測試。
臨時弄的示意圖(功能不完全)，應該是要抓cell的高度再回去調整PTT-contents的高度再扣掉一些保留下面的控制列。
以往塞在新網站我都只能祈禱塞進去剛好沒衝突，有問題的話只能再去改css然後還要檢查舊的網站會不會受影響。
這一類的問題只要用iframe就可以全部一勞永逸，以後套件內容就可以專注在套件內容，不用再額外測試網站本身的衝突或影響。而網站嵌入也只要考慮按鈕跟iframe的位置大小就好，只要能塞空的iframe就能保證套件能在上面正常顯示。
大概了解意思，但如果css能完美隔離的話就跟用iframe是一樣的意思了。
我對css沒有很熟但#PTTChat.table的scope不是僅限於<id="PTTChat">內部嗎？外部的css應該不會被更動到吧。
這部分是只為了使css不要對外不做污染更動，改了之後css的權重改變反而使套件內的css受到影響，然後又要再做調整。
我覺得應該是因為原本網站的css沒加上id讓之後加上的css覆蓋掉原本的設定了。
問題在於不知道哪邊會出問題。
可能還有其他問題是套件造成的但是我們不知道。之前剛開始支援holodex的時候也造成他們頻道列表跑版，但是使用者跑去跟holodex回報，他們也不清楚怎麼會變這樣。後來也是查了一段時間才發現是套件css造成的。
以往都是哪邊有問題就另外加id，然後看外部有沒有恢復->看內部有沒有出問題->看其他網站有沒有壞掉。但是有蠻多情況是發生問題然後根本沒聯想到是套件造成的問題。
臨時弄的示意圖(功能不完全)，應該是要抓cell的高度再回去調整PTT-contents的高度再扣掉一些保留下面的控制列。
我的想法是css外框已經寫好內部框架的高度了，所以理論上內部只要設定好css我覺得應該可以讓他高度100%自動填滿整個框架。
當然你的寫法比較直接而且比較快而且直接。
大概了解意思，但如果css能完美隔離的話就跟用iframe是一樣的意思了。
iframe可以隔離外部跟內部的所有東西，基本上可以當成兩個分頁的感覺，絕對不會互相影響；甚至連資料互傳都有嚴格的限制。
在twitch上面的套件登入後好像會讓twitch左邊的搜尋列也自動填入他的PTTID。其實不只css的部分，一直都有蠻多奇奇怪怪的問題的。
暫時先不用，等未來如果發生其他問題，而有必要的時候再討論。