这段时间在项目中用到了在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>teststitle>
<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; width: 0px;
border: 0px">iframe>
div>
<div style="background-color:Gray;position: absolute; z-index: 1010; left: 0px; top: 0px; width: 100%;height:100px">
div>
<div id="mydiv" style="position: absolute; z-index: 1010; left: 250px; top: 50px; width: 300px;
height: 400px;">
<iframe id="myid" onblur="onmyblur();" name="myid" src=" http://www.baidu.com"> iframe>
div>
body>
html>希望对大家有用~ 本博客内容转载请务必注明出处，谢谢。
<head>
<title>teststitle>
<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; width: 0px;
border: 0px">iframe>
div>
<div style="background-color:Gray;position: absolute; z-index: 1010; left: 0px; top: 0px; width: 100%;height:100px">
div>
<div id="mydiv" style="position: absolute; z-index: 1010; left: 250px; top: 50px; width: 300px;
height: 400px;">
<iframe id="myid" onblur="onmyblur();" name="myid" src=" http://www.baidu.com"> iframe>
div>
body>
html>希望对大家有用~ 本博客内容转载请务必注明出处，谢谢。
本文转自dotfun 51CTO博客，原文链接:http://blog.51cto.com/dotfun/286058
