Silverlight嵌入到HTML之windowless屬性及運用AjaxControlToolKit時出現虛線邊框的問題

   Silverlight程序最終是要以<object />的形式嵌入到HTML裏的，這就涉及怎麼和HTML元素進行佈局的問題。silverlight-plugin有個windowless屬性，當windowsless屬性值設置爲false時，silverlight在HTML裏就以子窗口的形式出現，即silverlight程序的展現由單獨的窗口來處理，與其他html元素的展現是相互獨立的。例如代碼：

<div id="silverlightControlHost" style="height:160px;width:300px;">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2">
            <param name="source" value="ClientBin/TestWindowlessProperty.xap"/>
            <param name="onerror" value="onSilverlightError" />
            <param name="background" value="transparent" />
            <param name="windowless" value="false" />
            <param name="minRuntimeVersion" value="2.0.31005.0" />
            <param name="autoUpgrade" value="true" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
                 <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
            </a>
        </object>
        <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
    </div>
    
    <div style="width:250px;height:160px;background:gray;">
        This is HTML DIV Element<br />
        This is HTML DIV Element<br />
        This is HTML DIV Element<br />
        This is HTML DIV Element<br />
        This is HTML DIV Element<br />
    </div>

在瀏覽器中顯示的如下：

   在這種模式下，Silverlight程序和HTML元素是不能相互融合到一起的，Silverlight的背景不能是透明的，可以通過　　 <param name="background" value="transparent" />來設置背景。

    雖然這裏設置了transparent，但顯示的效果並非透明而是黑色，這就是因爲不是windowless模式下。

    在有些應用環境下，我們的Silverlight程序在運行過程中所佔的位置大小是不一樣的。例如用Silverlight做一個下拉菜單，初始情況下所佔的位置高度是比較小的，當用戶點擊菜單後菜單展開，這時候Silverlight程序就要求佔的位置大點，高度改變了，但又不想因爲Silverlight的高度增加而撐開其他html元素或將其他元素遮擋住。比較有效的辦法就是在菜單的展開與收縮時動態改變<object>的高度，且在菜單展開時讓Silverlight的層次浮動到其他HTML元素上，在沒有Silverlight內容的地方顯示透明狀態。要實現這種效果，就需要將Silverlight設置爲windowless模式，即設置windowless屬性爲true,同時設置background的值爲transparent。另外，還要在Silverlight程序中將沒有內容的地方的背景設置爲透明，才能時Silverlight在html裏展現時相關地方爲透明效果。

例如：

 

 

所以我們的silverlight的<object/>元素的tabIndex也由0設置成了-1。而當關閉ModualPopup窗口時，對應的JS又恢復所有元素的tabIndex:

<div id="silverlightControlHost" style="height: 155px; width: 300px;">
        <div id="silverlightControlHost" style="height: 160px; width: 300px; position: absolute;
            z-index: 9">
            <object data="data:application/x-silverlight-2," type="application/x-silverlight-2">
                <param name="source" value="ClientBin/TestWindowlessProperty.xap" />
                <param name="onerror" value="onSilverlightError" />
                <param name="background" value="transparent" />
                <param name="windowless" value="true" />
                <param name="minRuntimeVersion" value="2.0.31005.0" />
                <param name="autoUpgrade" value="true" />
                <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
                    <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
                        style="border-style: none" />
                </a>
            </object>
            <iframe style='visibility: hidden; height: 0; width: 0; border: 0px'></iframe>
        </div>
    </div>
    <div style="width: 250px; height: 160px; background: gray;">
        This is HTML DIV Element<br />
        This is HTML DIV Element<br />
        This is HTML DIV Element<br />
        This is HTML DIV Element<br />
        This is HTML DIV Element<br />
    </div>

顯示如下：

   按照微軟提供的文檔，一般情況下是不建議使用windowless模式的，因爲這樣silverlight就和html混合展現，會降低性能，特別是silveright程序比較複雜的時候或者高質量多媒體顯示的時候。

   在Windowsless模式下，一般情況下Silverlight程序周圍是沒有邊框的，但在特定條件下，點擊Silverlight程序或者Silverlight程序獲得焦點後它的周圍就出現了煩人的虛線邊框。

   我參與的一個項目裏，原來將silverlight程序以windowless模式嵌入到html頁面一切正常，但當頁面中別的部分使用了AjaxControlToolkit的<ajaxToolkit:ModalPopupExtender />控件時，頁面彈出的ajax對話框關閉後silverlight周圍就出現了虛線邊框。經過一番探索，發現AjaxControlToolKit對應的JS在處理ModalPopup時是將頁面所有的元素的tabIndex設置爲-1,從而達到不允許用戶點擊的目的。

disableTab: function() {
        /// <summary>
        /// Change the tab indices so we only tab through the modal popup
        /// (and hide SELECT tags in IE6)
        /// </summary>

        var i = 0;
        var tagElements;
        var tagElementsInPopUp = new Array();
        Array.clear(this._saveTabIndexes);

        //Save all popup's tag in tagElementsInPopUp
        for (var j = 0; j < this._tagWithTabIndex.length; j++) {
           
            tagElements = this._foregroundElement.getElementsByTagName(this._tagWithTabIndex[j]);
            for (var k = 0; k < tagElements.length; k++) {
                tagElementsInPopUp[i] = tagElements[k];
                i++;
            }
        }

        i = 0;
        for (var j = 0; j < this._tagWithTabIndex.length; j++) {
            tagElements = document.getElementsByTagName(this._tagWithTabIndex[j]);
            for (var k = 0; k < tagElements.length; k++) {
                if (Array.indexOf(tagElementsInPopUp, tagElements[k]) == -1) {
                    this._saveTabIndexes[i] = { tag: tagElements[k], index: tagElements[k].tabIndex };
                    tagElements[k].tabIndex = "-1";
                    i++;
                }
            }
        }

 

 

    restoreTab: function() {
        /// <summary>
        /// Restore the tab indices so we tab through the page like normal
        /// (and restore SELECT tags in IE6)
        /// </summary>

    for (var i = 0; i < this._saveTabIndexes.length; i++) {
            this._saveTabIndexes[i].tag.tabIndex = this._saveTabIndexes[i].index;
        }

        Array.clear(this._saveTabIndexes);

        //IE6 Bug with SELECT element always showing up on top
        if ((Sys.Browser.agent === Sys.Browser.InternetExplorer) && (Sys.Browser.version < 7)) {
            for (var k = 0; k < this._saveDesableSelect.length; k++) {
                this._saveDesableSelect[k].tag.style.visibility = this._saveDesableSelect[k].visib;
            }
            Array.clear(this._saveDesableSelect);
        }
    },

    silverlight的<object/>元素的tabIndex也恢復成了0。

    關鍵就是這個<object/>的silverlight標籤的tabIndex設置爲0的這個操作，使得其周圍出現了虛線邊框——雖然初始狀態下其tabIndex本來就是0。

    我們可以做個實驗，在silverlight以windowless模式嵌入到HTML頁面時（非windowless模式不會出現邊框），在頁面初始化時（或某個事件觸發時）顯示將silverlight的<object/>標籤的tabIndex設置爲0：

<Script>
   document.getElementById("silverlightObjectElementId").tabIndex = 0;
</Script>

   這時,當鼠標點擊Silverlight程序時,周圍就會浮現虛線邊框,如圖:

   爲解決這個問題,我嘗試了幾種方法：

    1、在IE下：

         1）可以在<object />元素的onfocus事件進行處理,讓它不要得到焦點:  

    <script language=javascript>
        document.getElementById("silverlightObjectElementId").onfocus = function() {
            if (this.tabIndex != -1) {
　　　　　　this.blur();
                this.tabIndex = -1;
            }
        }
    </script>

        2) 可以在引用silverlight的<object>元素中直接將tabindex設置爲-1，這樣在AjaxControlToolkit的js中運行restoreTab()函數後silverlight的tabindex仍舊是-1而不是0，避開了由此導致的虛線邊框問題。
            <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"   style="width:200px;height:200px;"  tabIndex=-1 >

       3) 在<object>標籤中直接加上hidefocus屬性，即：
            <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"   style="width:200px;height:200px;"  HideFocus=true>

        4) 可以在onpropertychange事件裏做一些處理。

   2、在FireFox下：

       1) 添加樣式outling:none,即: 
            <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"   style="width:200px;height:200px;outline:none;"  >

        2) 在事件oninput裏做一些處理(未嘗試)。