zoukankan      html  css  js  c++  java
  • 彻底解决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>

    希望对大家有用~

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

  • 相关阅读:
    第十二章学习笔记
    UVa OJ 107 The Cat in the Hat (戴帽子的猫)
    UVa OJ 123 Searching Quickly (快速查找)
    UVa OJ 119 Greedy Gift Givers (贪婪的送礼者)
    UVa OJ 113 Power of Cryptography (密文的乘方)
    UVa OJ 112 Tree Summing (树的求和)
    UVa OJ 641 Do the Untwist (解密工作)
    UVa OJ 105 The Skyline Problem (地平线问题)
    UVa OJ 100 The 3n + 1 problem (3n + 1问题)
    UVa OJ 121 Pipe Fitters (装管子)
  • 原文地址:https://www.cnblogs.com/slteam/p/1690427.html
Copyright © 2011-2022 走看看