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

例如：

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

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:

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);
        }
    },

Code

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>

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里做一些处理(未尝试)。

原文链接：http://www.cnblogs.com/qguohog/archive/2009/04/11/1433676.html

时间： 2024-12-30 04:57:50

Silverlight嵌入到HTML之windowless属性及运用AjaxControlToolKit时出现虚线边框的问题的相关文章

Silverlight 图表控件 Visifire 常用属性

首要介绍 Visifire 常用属性的设置,用来生成不合样式的图例 设置Chart的属 //设置title的值 // 创建一个题目标对象 Title title = new Title(); // 设置题目标名称 title.Text = titleText; title.Padding = new Thickness(0, 10, 5, 0); // 向图标添加题目 chart.Titles.Add(title); //是否显示3D结果 chart.View3D = view3D; //图表数

Silverlight中Image控件Stretch属性的四种值比较

通过设置Image控件Stretch属性的值可以控制图片的显示形式: 包含的值:None.Fill.Uniform.UniformToFill 1 <Grid x:Name="LayoutRoot" Background="White" Height="489" Width="603"> 2 <Image Height="150" HorizontalAlignment="Lef

个人经验 - Android的RelativeLayout布局的layout_height属性设置为wrap_content时的坑

Android的RelativeLayout布局的layout_height属性设置为wrap_content时的坑: 此坑出现的条件: 1.RelativeLayout布局的layout_height属性设置为wrap_content 2.某“居中View”设置为layout_centerX(layout_centerVertical.layout_centerHorizontal.layout_centerInParent) 3.其它View相对于“居中View”做布局 此时坑出现了: 无论

mongo数据库中一条记录中某个属性是数组情形时 数据结构的定义

package entity; import java.util.Date; import com.mongodb.BasicDBList;import com.mongodb.DBObject; public class CommonEditEntity { /** 数据库中查询记录结果 */ private DBObject record; /** 数据库默认id */ private String _id; /** 项目id */ private String project_id; /*

java 反射： 当Timestamp类型的属性值为null时，设置默认值

import java.beans.PropertyDescriptor; import java.lang.reflect.Field; import java.lang.reflect.Method; import java.sql.Timestamp; class Person { private String name; private int age; private Timestamp birth; public Timestamp getBirth() { return birth

C# Newtonsoft.Json JObject移除属性，在序列化时忽略

原文 C# Newtonsoft.Json JObject移除属性,在序列化时忽略 一.针对 单个 对象移除属性,序列化时忽略处理 JObject实例的 Remove() 方法,可以在 指定序列化时移除属性和值 示例如下 : [csharp] view plain copy //json 序列化 JObject obj1 = JObject.FromObject(new { id = 1, name = "张三", age = 20 }); Console.WriteLine(obj1

Day49：CSS属性操作（文本、背景、边框、列表、display、边距）

一.CSS属性操作 1.CSS text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如:  red p { color: rebeccapurple; } 水平对齐方式 text-align 属性规定元素中的文本的水平对齐方式. left       把文本排列到左边.默认值:由浏览器决定. right     把文本排列到右边. center 把文

16_Android生命周期再介绍，通过androidconfigChanges属性让界面旋转时不改变状态中保留的值

?? A  android:configChanges属性 对android:configChanges属性,一般认为有以下几点: 1 不设置Activity的android:configChanges时,切屏会重新调用各个生命周期,切横屏时会执行一次,切竖屏时会执行两次. 2 设置Activity的android:configChanges="orientation"时,切屏还是会重新调用各个生命周期,切横.竖屏时只会执行一次. 3.设置Activity的android:config

如何理解css3 -webkit-animation-fill-mode属性值为both时的使用方法

大家都知道 -webkit-animation-fill-mode 属性是检索或设置对象动画时间之外的状态,但是一直以来我对它的属性值都存在一个疑问,both和forwards的使用到底有什么区别呢?经过不停的测试.搜索,个人认为差别在于: both是设置对象状态为动画结束或开始的状态,主要是取决于-webkit-animation-direction这个属性,为什么这么说呢?请看以下: <div class="center"></div> 1 .center{