在嵌入式瀏覽器中基于HTML的滾動顯示效果實現方法研究

收稿日期：2014－04－30

基金項目：阿壩師專校級規劃課題(ABS13-19)。

作者簡介：趙勇軍(1978-)，男，四川南充人，碩士，助理研究員，主要研究方向：計算機應用技術、智能信息處理。

摘要：一種滾動內容顯示效果在嵌入式頁面中的應用非常廣泛。實現滾動顯示的效果有多種方式，其中MARQUEE 標簽方式是使用最方便，頁面編碼最快捷的一種。當然，頁面制作者的快捷來源于瀏覽器對該標簽的全面支持，同時也是區分嵌入式瀏覽器功能是否完善的重要屬性之一。本文提供了一種如何在嵌入式瀏覽器中簡單實現滾動效果的方法。

關鍵詞：嵌入式瀏覽器； MARQUEE； 滾動顯示

中圖分類號：TP308文獻標識碼：A文章編號：2095-2163（2014）03-0100-03

Study on Implementation of Scrolling Display based on HTML in Embedded Browser

ZHAO Yongjun， FU Hongxia

(Network Management Center， Aba Teachers College， Wenchuan Sichuan623002， China)

Abstract：Scrolling display is extensively used in embedded page. There is a variety of ways to achieve scrolling display， where， MARQUEE tag is the most convenient and most efficient page-coding way. Obviously， this efficiency of page creators is from full support of browser to the tag， which is also one of the important properties to evaluate whether the functions of embedded browser are completed. This essay provides a simple way of how to achieve scrolling display in embedded browser.

Key words：Embedded Browser; MARQUEE; Scrolling Display

0引言

在程序編寫中，滾動內容顯示通常指用一個矩形區域顯示用戶特別關心的少量信息，這條信息串首尾相連，并且向一個方向循環滾動。證券業中常用滾動顯示來呈現不斷變化的股票行情，網頁中常用滾動顯示提供瀏覽者一些重要信息等等。在滾動顯示的多種實現方式中，HTML 語言的MARQUEE 標簽以其編碼簡單，使用方便和功能全面成為最受網頁制作者青睞的一種方式，因而也是目前倍受關注的研究課題。

MARQUEE 標簽中，滾動內容并不只是局限于文本，圖片、表格，甚至一段HTML 代碼段都可以用來滾動（瀏覽器會將其代碼段解析為用戶可以觀看的內容）。而滾動的速度、方向、循環方向、循環次數等等都可以自由設置［1］。在此，對其具體實現開展分析研究。

1MARQUEE 標簽的使用方法

1.1代碼示例

阿壩師范高等專科學校， 以上代碼可實現“阿壩師范高等專科學校”幾個字在以紅色為背景色的560x30 范圍的矩形區域內自右向左以8檔速度循環滾動。

1.2標簽的屬性

(1)滾動方向(direction) ，包括left/right/up/down。缺省值為left，即自右向左滾動。

(2)滾動速度(scrollamount)，實際上是設定滾動字幕滾動一次的距離，其單位長度由瀏覽器決定。缺省值為6。值越大，速度越快。

(3)滾動方式(bihavior)，包括scroll/slide/alternate，分別表示反復地由一端滾動至另一端；只滾動一次，由一端滾動至另一端；在兩端反復來回滾動。缺省值為scroll。

(4)滾動循環次數(loop)，包括infinite/num。infinite 或loop= -1，都表示無限次滾動；num 等于幾，就表示循環幾次。缺省值為infinite。

(5)動作延時(scrolldelay)，設定兩次滾動之間的延遲時間。缺省值為0，表示每次滾動結束后立即開始下一次滾動。

(6)滾動區域背景色(bgcolor) ，設定滾動區域的背景顏色。缺省值為透明；滾動區域高度(height) 設定滾動區域的高度；滾動區域寬度(width) 設定滾動區域的寬度；空白( hspace/ vspace) 設定滾動內容左右邊框和上下邊框的寬度［2］。

2MARQUEE 標簽的實現方法

2.1整體思路

在圖形引擎中將MARQUEE 處理為窗口控件，在瀏覽器中將其作為一個頁面元素參與排版。將待滾動的內容形成一個內置子頁面，保存在本地，并呈現在該窗口控件中。同時注冊回調函數，并通過定時器，定時向該窗口控件發送滾動消息，實現自動滾屏［3］。而MARQUEE 的各種屬性，則通過窗口控件和內置子頁面的渲染得到相應的體現。

生成內置子頁面的實現方式，使得滾動內容不再受到限制，既可以是文字、表格、圖片，也可以是任何一段HTML 代碼所呈現出來的效果。當滾動內容是待解析的HTML代碼段時，代碼段可以和內置子頁面一起送入瀏覽器解析流程完成解析［4］。

2.2內置子頁面生成方式根據滾動方向不同進行設定

內置子頁面的生成方式可分為兩類，首先將水平方向作為實例進行設定：以MARQUEE窗口的高度為高度，以MARQUEE 窗口的寬度為寬度，形成左右兩個空白邊距區域，拼接在滾動內容左右。在窗口呈現的初始狀態，即為頁面左空白邊距。當可視區域窗口收到消息開始滾動時，內容從可視窗口右側進入，向左滾動，即形成預期的滾動效果。當滾動到末尾的時候，呈現給用戶的依然是空白區域，此時滾動結束，如果將內置頁面重新定位到最初位置，重新開始一輪滾動，即獲得了循環滾動的效果［5］。MARQUEE頁面如圖1所示。第3期趙勇軍，等：在嵌入式瀏覽器中基于HTML的滾動顯示效果實現方法研究智能計算機與應用第4卷

圖1MARQUEE頁面圖

Fig.1MARQUEE page figure

將待滾動的內容添加到內置子頁面之后，該頁面將會送入瀏覽器的解析流程，并和其它從網絡上獲得的頁面文件一樣，經過瀏覽器的后續排版、渲染等流程，最終顯示給用戶。

創建內置子頁面的代碼示例如下：

int marquee_htm_new(char *textcolor，char *bgcolor， int type，int width， int height， char* file_name， char* marquee_str)

{ FILE* fp = fopen(file_name， \"w+\");

if( fp == NULL )

return -1;

if(type == 0)

{/*direction is up or down*/fprintf(fp， \"＼n＼n

fprintf(fp， \" bgcolor=＼\"%s＼\"\"， bgcolor); fprintf(fp， \" text=＼\"%s＼\"\"， textcolor); fprintf(fp， \" style=＼\"font-size:%dpx＼\">＼n\"， style->font->size); fprintf(fp， \"

fprintf(fp，＼n

Else

{ fprintf(fp， \"＼n＼n

fprintf(fp， \" bgcolor=＼\"%s＼\"\"， bgcolor); fprintf(fp， \" text=＼\"%s＼\"\"， textcolor); fprintf(fp， \" style=＼\"font-size:%dpx＼\">＼n\"， style->font->size); fprintf(fp， \"

fclose(fp);return 0;

}

豎直方向內置子頁面的生成原理同上。MARQUEE 豎直方向的內置子頁面示意圖則如圖2所示。

圖2內置子頁面示意圖

Fig.2Schematic diagram of built-subpages

特別指出的是，內置子頁面生成的時間點很重要，必須在子頁面寬度和高度都明確之后才可調用函數生成此內置頁面。

2.3內置子頁面管理方式頁面中可以同時使用多個MARQUEE

研究使用函數生成隨機名稱的內置子頁面，并使其和各個MARQUEE 形成一一對應關系［6］。在頁面退出的時候，也就隨之而需要清理當前頁面內所有MARQUEE 相關的資源，當然也包括相應的內置子頁面。

2.4重要屬性的實現

(1) 滾動窗口的高度和寬度

使用MARQUEE 標簽時，可以明確定義其寬度和高度，也可不做定義。在未做定義的情況下，將遵循如下處理辦法：

在瀏覽器解析模塊中，MARQUEE 窗口建立之初，若網頁代碼中沒有定義其寬度、高度，可建立一個寬度和高度都為1 的窗口。在程序運行至排版模塊時，根據瀏覽器內部維護的元素棧查看其若干級父元素的寬度和高度，并按照繼承性算法計算得來，再基于此數據調整滾動窗口大小，進而創建其對應的內置頁面，設定定時器，而且注冊其回調函數［7］。通常，使用圖形引擎中的函數來更改MARQUEE窗口大小。具體函數的形式為：

BOOL GUIAPI MoveWindow (HWND hWnd， int x， int y， int w， int h，BOOL fPaint);

(2) 滾動速度

通過定時器，發出滾動消息的頻率是固定的，可通過采用更改滾動步長的方式來實現該屬性。代碼示例如下：

/*如果內容未滾動至尾，則繼續滾動*/

if (viewport->world_x + viewport->allocation.width < world_width) {

/* 以頁面解析的速度值乘以單位長度作為滾動的步長*/

scroll = scrollamount * unit;

if (scroll) {

SetScrollPos (viewport->hwnd， SB_HORZ， x);

ScrollWindow (viewport->hwnd， -scroll， 0， NULL， NULL);

}

scroll = widget->marquee->m_movespeed; }

else

/* 如果內容已滾動至尾，則重置子頁面至初始狀態*/

{ MGD_scroll_to_x(viewport， 0); return; }

(3)滾動方式選擇

向滾動窗口發送“向左滾動”和“向右滾動”的消息，可實現不同的滾動方式。 scroll 方式表示反復地由一端滾動至另一端。具體遵循以下流程（以自右向左滾動為例）：

(a) 判斷滾動內容的右邊緣是否已經到達滾動窗口的左邊緣，是則跳至（c）；

(b) 程序向滾動窗口定時發送“向左滾動”消息；

(c)調整子頁面位置至初始狀態，跳至(a)。

alternate 方式表示在兩端反復來回滾動。運行流程如下：

(a) 判斷滾動內容的左邊緣是否已經到達滾動窗口的左邊緣，是則跳至（c）；

(b) 程序向滾動窗口定時發送“向左滾動”消息；

(c) 程序向滾動窗口定時發送“向右滾動”消息；

(d) 判斷滾動內容的右邊緣是否已經到達滾動窗口的右邊緣，是則跳至（a）。2.5排版環節的處理

當MARQUEE 的滾動方向為水平方向且滾動內容為文字時，MARQUEE 的排版算法和瀏覽器通用排版算法并不一致，此時需要排版流程進行特別處理。MARQUEE 要求該段文字在內置頁面中排列為一行，而不需受到頁面最大寬度的限制，其寬度即為所有文字的寬度之和，其高度則是此行最高文字的高度。

2.6多滾動窗口的優化

頁面中同時存在多個MARQUEE 標簽，即會對嵌入式設備的CPU處理能力提出挑戰，此時顯示則變得閃爍。本文創建了MARQUEE 管理器，等待頁面中所有MARQUEE 控件的顯示狀態都準備妥當才開始繪圖顯示，以解決此問題。

在創建MARQUEE 控件時，將當前控件的相關信息加載到MARQUEE 管理器；在銷毀MARQUEE 空間時，則將當前控件的相關信息從MARQUEE 管理器中卸載［8］。

3結束語

滾動內容顯示效果在嵌入式瀏覽器中的實現，也存在著其它方式。比如通過圖形顯示控制，將待滾動內容的一部分在頁面指定區域顯示，下一次顯示另外一部分的內容。但是這樣做也存在著無法支持滾動內容包含HTML 代碼段等問題。綜合比較，本文所提供的方法，具有支持完整和高效率等特點，是目前比較科學的實現方法。

參考文獻：

［1］陳凱. HTML的創意(續)［J］. 中國信息技術教育，2008(4):29+36.

［2］鐘蜜，方勇，鄧赟. 基于XML/HTML標簽屬性的信息隱藏模型［J］.通信技術，2010(5):106-108.

［3］楊留慧，雷航，郭文生. 嵌入式瀏覽器解析排版并行化研究與設計［J］. 計算機應用，2011(12):3331-3333.

［4］張紅琴，陳煥英. 基于CSS和JavaScript的網頁滾動字幕［J］. 長春工業大學學報(自然科學版)，2012(2):165-170.

［5］劉愛民，王凌燕. 基于ASP技術的滾動公告欄的動態更新［J］. 電腦開發與應用，2006(6):39-40.

［6］謝富平. 用Java/Script、Fireworks制作連續滾動圖片的方法［J］. 電腦開發與應用，2005(6):64.

［7］孫瑋. 嵌入式瀏覽器解析與排版布局引擎的研究優化［D］. 成都:電子科技大學，2012（3）:34.

［8］邢文華. 基于緩存策略的嵌入式瀏覽器解析器的實現［D］. 沈陽:東北大學，2008（4）:23-25.