How to Embed Silverlight Content in HTML

1.http://blogs.msdn.com/tims/archive/2007/07/31/iframe-support-in-silverlight-streaming.aspx

   http://silverlight.net/forums/p/3722/10851.aspx

   This-> http://www.ddj.com/architect/202800424?pgno=2

----------------------------------------------------------------

先来个js文件 用于第二种 embed

using <DIV> tag embed Flash and Silverlight

----------------------------------------------------------------

//IamV_flash
//IamV_silverlight

function IamV_Initialize() {
    var myLayers = document.getElementsByTagName('div');
    if (myLayers.length <= 0)
        return;

    var myDiv = null;
    var sHtml = null;
    for (i = 0; i < myLayers.length; i++) {
        myDiv = myLayers[i];
        if (myDiv.className == 'IamV_flash') {
            sHtml = getFlash(myDiv.id);
            myDiv.innerHTML = sHtml;
            continue;
        }
        if (myDiv.className == 'IamV_silverlight') {
            sHtml = getSilverLight(myDiv.id);
            myDiv.innerHTML = sHtml;
            continue;
        }
    }
}
function getFlash(url) {
    return '<object width="100%" height="100%">'
            //+ '<param name="movie" value="' + url + '"></param>'
            + '<param name="allowFullScreen" value="true"></param>'
            + '<param name="allowscriptaccess" value="always"></param>'
            + '<embed src="' + url + '" type="application/x-shockwave-flash"'
            + 'allowscriptaccess="always" allowfullscreen="true" width="100%" height="100%"></embed></object>';
}
function getSilverLight(url) {
    return '<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">'
   + '<param name="source" value="' + url + '"/>'
   + '<param name="background" value="white" />'
   + '<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>';
}

----------------------------------------------------------------

测试的HTML文件

----------------------------------------------------------------

<html>
<head>
</head>
<body>
 <p>第一种.参见http://www.cnblogs.com/nasa/archive/2008/02/14/1068654.html</p>
 <script type="text/xaml" id="xamlContent">
        <?xml version="1.0"?>
        <Canvas
            xmlns="http://schemas.microsoft.com/client/2007"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
          <Rectangle
            Height="200"
            Width="200"
            Stroke="Black"
            Fill="Wheat"
            StrokeThickness="5"
            RadiusX="10.0"
            RadiusY="10.0"/>
          <TextBlock Canvas.Top="100" Canvas.Left="10">
            No Javascript, wheeeee!!!
          </TextBlock>
        </Canvas>
    </script>

    <div id="controlHost">
        <object
            id="silverlightControl"
            type="application/x-silverlight"
            height="800"
            width="600">
          <param name="Source" value="http://172.28.3.85/IamVSilverlight/ClientBin/IamVImageRotator.xap" />
        </object>
    </div>
  <br />
 <p>第二种.使用上面的JS文件,用于过滤object tag 的情况</p>
 <br />
<script type="text/javascript" src="http://172.28.3.85/SL_inHtml/Silverlight_Helper.js%22%3E%3C/script>

<div id='http://172.28.3.85/IamVSilverlight/ClientBin/IamVImageRotator.xap' class='IamV_silverlight' style="border-style: solid; border-width: 1px; width: 500px; height: 400px;">
 <script type="text/javascript">IamV_Initialize()</script>
 </div>

<input type='button' value='getSL' text='IamV'
 onclick='getElementById("tt").value=getSilverLight("http://172.28.3.85/IamVSilverlight/ClientBin/IamVImageRotator.xap%22);'/>
 <br />
 <textarea id="tt" cols="60" rows="8"></textarea>
 <br />
  <br />
 <p>第三种.简单的</p>
 <br />
<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="http://172.28.3.85/IamVSilverlight/ClientBin/IamVImageRotator.xap%22/>
<param name="background" value="white" />
<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>
  <br />
 <p>第四种.using embed tag,使用 embed 标签</p>
 <br />
<embed type="application/x-silverlight-2" id="silverlightControl"
  width="500" height="400" background="white"
  source="http://172.28.3.85/IamVSilverlight/ClientBin/IamVImageRotator.xap%22/>
<br />

<br />
<embed allowScriptAccess="never" allowNetworking="internal"
 type="application/x-silverlight-2"
 width="500" height="400" background="white"
 source="http://172.28.3.85/IamVSilverlight/ClientBin/IamVImageRotator.xap%22/>


</body>
</html>

 

posted @ 2009-02-10 18:22  IamV  阅读(578)  评论(0编辑  收藏  举报