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" />
            
<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里展现时相关地方为透明效果。

例如:

<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" />
                
<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,从而达到不允许用户点击的目的。

 

Code
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++;
                }
            }
        }

 

所以我们的silverlight的<object/>元素的tabIndex也由0设置成了-1。而当关闭ModualPopup窗口时,对应的JS又恢复所有元素的tabIndex:

 

Code

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

    关键就是这个<object/>的silverlight标签的tabIndex设置为0的这个操作,使得其周围出现了虚线边框——虽然初始状态下其tabIndex本来就是0

    我们可以做个实验,在silverlight以windowless模式嵌入到HTML页面时(非windowless模式不会出现边框),在页面初始化时(或某个事件触发时)显示将silverlight的<object/>标签的tabIndex设置为0:

Code

   这时,当鼠标点击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里做一些处理(未尝试)。

posted on 2009-04-11 14:43  野文  阅读(4806)  评论(1编辑  收藏  举报