Silverlight嵌入Html并调用该Html中的Javascript

来源：互联网发布：网络供应商联系方式编辑：程序博客网时间：2024/05/17 04:14

本文将分两步进行说明，第一步说明如何在silverlight的xaml脚本中加入html。第二步说如何在silverlight中调用html中的javascript函数。说明：vs2010 ultimate + silverlight5

本文中所有代码都可以在github中查看，git版本中采用了master-dev的方式。在master中可以查看每一个demo的最后完成，在dev中可以查看每一步的代码。
github地址：git@github.com:kiwiwin/silverlight-demo.git。文件夹名称htmlhost-javascript-demo

一、在xaml中加入html

1.在xaml中加入一个HtmlHost Control，显示的内容就是hello.html中的内容，是“hello，kiwi_coder”

    <StackPanel x:Name="LayoutRoot" Background="White">        <divtools:HtmlHost x:Name="htmlHost" SourceUri="hello.html" Width="500" Height="500"></divtools:HtmlHost>    </StackPanel>

2.为了使用HtmlHost，需要将silverlightControlHost设为windowless，这里我删除了.aspx，只用了.html：添加如下

<param name="windowless" value="true"/>

最后的silverlightControlHost：

          <div id="silverlightControlHost">                <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">                    <param name="source" value="ClientBin/htmlhost-javascript-demo.xap"/>                    <param name="onError" value="onSilverlightError" />                    <param name="background" value="white" />                    <param name="minRuntimeVersion" value="5.0.61118.0" />                    <param name="autoUpgrade" value="true" />                    <param name="windowless" value="true"/>                    <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.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>

3.run，显示如图：

二、在silverlight中调用html中的javascript函数

1.在hello.html定义一个名为sayHello的函数，该函数被调用时，弹出一个提示信息，显示“Hello，kiwi_coder”.

    function sayHello() {                alert("Hello, kiwi_coder");            }

2.为了方便，在silverlight所在的htmlhost-javascript-demoTestPage.html中定义一个函数askHtmlSayHello.说明：HtmlHost是自动在htmlhost-javascript-demoTestPage.html中最后添加了一个iframe，所以取最后一个即是html所在的iframe。

    function askHtmlSayHello() {                window.frames[window.frames.length-1].sayHello();            }

3.在MainPage.xaml中添加一个button用来调用html中的javascript函数：

    public partial class MainPage : UserControl    {//...        private void SayHello(object sender, RoutedEventArgs e)        {            HtmlPage.Window.Invoke("askHtmlSayHello");        }    }

4.run