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

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

本文中所有代码都可以在github中查看，git版本中采用了master-dev的方式。在master中可以查看每一个demo的最后完成，在dev中可以查看每一步的代码。
github地址：[email protected]: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”.

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

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

@H_404_53@ 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

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

相关推荐