• 彻底解决Windowless=true情况下TextBox不能输入的问题


    这段时间在项目中用到了在Silverlight应用程序中显示Html content的情况,初期的思路是在包含Silverlight的aspx或html页面里一个div,在div里include一个iframe,
    然后通过设计windowless=true实现HTML与Silverlight重叠显示,经过试验iframe的确可以和Silverlight同时显示了,但接着又出现了一个big mistake,
    就是Silverlight这边的基本控件TextBox不能工作输入汉字了,英文字符可以,不得不说这是Silverlight的一个bug。

    经过search了一下发现目前还没有彻底的解决办法,都是通过html的input代替,但是这样的问题是input的位置不能用silverlight内置的布局控制,接下来就考虑通过CSS定义z-index来将iframe置于silverlight前面,这样就可以在windowless=false的情况下将html显示在silverlight前面,但是又来了一个问题,就是一但在silverlight这边click mouse时iframe焦点丢失后,html的zindex就跑到silverlight的后面了,使得html不可见了。

    既然如此,那么我们又通过给焦点的方式解决,就是用javascript的iframe.focus()结果问题依旧,看来想用html和silverlight同台是真是没戏了……,不过最后在Silverlight.net上的贴子发现了一个小的细节,就是给iframe的属性赋值,看起来就是一个等号,却解决了焦点的问题,下面分享一下代码:

    <html>
    <head>
        <title>tests</title>
        <script type="text/javascript">
            function onmyblur() {
               var d = document.getElementById("myid");
                d.style.height = 0;
                d.style.height = 400;
               // d.focus();
            }
        </script>
           <style type="text/css">
        html, body {
    	    height: 100%;
    	    overflow: auto;
        }
        body {
    	    padding: 0;
    	    margin: 0;
        }
        #silverlightControlHost {
    	    height: 100%;
    	    text-align:center;
        }
        </style>
    </head>
    <body>
        <div id="silverlightControlHost">
            <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
                width="100%" height="100%">
                <param name="source" value="ClientBin/test4.xap" />
                <param name="onError" value="onSilverlightError" />
                <param name="background" value="white" />
                <param name="minRuntimeVersion" value="4.0.50303.0" />
                <param name="autoUpgrade" value="true" />
                <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50303.0" style="text-decoration: none">
                    <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"
                        style="border-style: none" />
                </a>
            </object>
            <iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px;  0px;
                border: 0px"></iframe>
        </div>
        <!--onblur="onmyblur();"-->
        <div style="background-color:Gray;position: absolute; z-index: 1010; left: 0px; top: 0px;  100%;height:100px">
        </div>
        <div id="mydiv"  style="position: absolute; z-index: 1010; left: 250px; top: 50px;  300px;
            height: 400px;">
            <iframe id="myid" onblur="onmyblur();"  name="myid" src="http://www.baidu.com">  </iframe>
        </div>
    </body>
    </html>

    希望对大家有用~

    本博客内容转载请务必注明出处,谢谢。

  • 相关阅读:
    vue(21)初识Vuex
    ESCMScript6(3)Promise对象
    vue(20)生命周期函数
    vue(19)嵌套路由
    vue(18)路由懒加载
    vue(17)vue-route路由管理的安装与配置
    vue(16)vue-cli创建项目以及项目结构解析
    vue(15)vue-cli介绍与安装
    webpack(11)配置文件分离为开发配置、生成配置和基础配置
    webpack(10)webpack-dev-server搭建本地服务器
  • 原文地址:https://www.cnblogs.com/slteam/p/1690427.html
Copyright © 2020-2023  润新知