異域內框顯示單一捲軸
框架的 issues 還真是一籮筐, 尤以異域內框為最. 本篇討論如何讓 iframe 只顯示垂直捲軸卻隱藏水平捲軸. 為求分明, 以下將採條列式敘述:
- 緣起: 想在 阿尾的孤狗窩 嵌入一個留言區塊, 卻不願額外申請服務, 因而欲以 blogspot 文章末 張貼意見 的功能來替代. 但整個頁面不可能全部顯露, 因此藉 iframe 嵌入網頁. 並且為求美觀, 只顯露出意見列表部份, 且取消水平捲軸以免訪客疑惑.
- 問題: <iframe scrolling=[yes/no/auto] 並無法指定單一捲軸出現, 即使以 CSS 方法指定亦無效.
- 普遍解法:
- 先在被含頁的<html> 前加入
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - 主頁的內框為
<iframe width=300 height=150 src="ex_ifr_vscroll.html" scrolling="no" border=0 MARGINHEIGHT=0 MARGINWIDTH=0 allowtransparency style="overflow-x: hidden; overflow-y: auto; border-width: 0px;">其中的 style 設定是為了在 Moz 中能顯示捲軸並隱藏邊框; ex_ifr_vscroll.html 則是己方所執文件 - 為了在 IE 中能顯示捲軸, 再設定被含頁 ex_ifr_vscroll.html
<body style="overflow-y: scroll; overflow-x: hidden;"> - 點此下載簡易範例或[+/-] 顯示/隱藏以下展示
- 先在被含頁的<html> 前加入
- 難題:
- 假想今天若是鑲入他人網頁, 便無法篡改其頁內元素. 且因異域, 由外控制亦遭禁止.
- 即使這個 blog 我能掌控, 但修改模版亦將影響全站文章.
- 另解: 以 div 的特性作為 iframe 的可視窗(viewport), 換言之, 由 div 產生捲軸並嵌入 iframe. 範例碼如下:
<div style="overflow-x: hidden; overflow-y: auto; width: 150px; height: 150px;"><iframe width=800 height=600 src="http://jarway.blogspot.com/2007/04/blog-post_26.html#comments" scrolling="no" border=0 MARGINHEIGHT=0 MARGINWIDTH=0 allowtransparency style="border-width: 0px; margin-left:-1px;"></div> - 以下為結果展示. 左邊以 div 作 viewport, 特別注意的細節是 iframe 不該比 div 小; 右邊妄想直接控制別人的 iframe 則在 IE 中秀不出捲軸. A=.=; [+/-] 顯示/隱藏以下區塊
由以上左右展示可知, 右框即使在 Mozilla 中能出現垂直捲軸, 但是讀者能往上回捲至頂, 看到不該看的東西而長針眼; 左框由於內容本無捲軸或縱使有也無妨, 因為水平尺寸遠大於外層附加的 div 而遭覆蓋. 垂直尺寸也該加大不加價, 才能預留多筆意見的空間. 因為 div 會自動配置足夠的垂直捲軸長度, 並為 IE 特意偏移一點, 挖了一塊以錨點 comments 為左上角(-1, 0)的可視區, 便不會發生多餘資訊的側漏現象. 如此地保護讀者, 真是佛心來的啊!
附帶一提, allowtransparency 在 IE 中效果竟是參照 body 的顏色; 在 Mozilla 中則完美地繼承父元素顏色.
3 筆指教:
將iframe包在div裡面
如果iframe裡的網頁css有設定bg圖固定
結果就是捲動整個iframe
如此固定底圖就沒有意義了
整個跟著捲動...XD
純屬提一下
因為我剛剛測試了一下
還是第一個方法好用，感謝您~
不好意思
再請教一個問題
您文章裡的"[+/-] 顯示/隱藏以下展示"
能否高抬貴手寫一篇教學
這功能非常實用
感謝您
咦?本站不是廢了嗎? XD___
好啦好啦,為了答謝唯一觀眾,區區不才敞人我今天就努力完成上述兩則意見中的要求好了^^Y
張貼意見