SilverLight瀏覽器互動之：Html頁面通過Javascript調用SilverLight程式內方法（附源碼）

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

概述：

SilverLight運行瀏覽器時，像Ajax一樣可以在Html頁面通過Javascript調用SilverLight程式內方法。

效果：

[ScriptableMember]

指示可由 JavaScript 調用方訪問的特定屬性、方法或事件。

為了調用SilverLight項目中的方法，我們必須指定該方法能否被Javascript調用

HtmlPage.RegisterScriptableObject 方法
註冊託管對象以便用於通過 JavaScript 代碼的可指令碼化訪問。

為了使瀏覽能夠通過Javascript訪問SilverLight程式，必須先聲明該SilverLight程式能被Javascript調用。

Xaml代碼：

    <Grid x:Name="LayoutRoot"  Background="YellowGreen">

</Grid>

SilverLight CS代碼：

    public partial class MainPage : UserControl
    {
public MainPage()
        {
            InitializeComponent();

//HtmlPage.RegisterScriptableObject 方法 
//註冊託管對象以便用於通過 JavaScript 代碼的可指令碼化訪問。
            HtmlPage.RegisterScriptableObject("Button", this);
        }

/// <summary>
/// 執行網路服務
/// [ScriptableMember]指示可由 JavaScript 調用方訪問的特定屬性、方法或事件。
/// </summary>
        [ScriptableMember]
public void ExecuteWebService()
        {
            MessageBox.Show("我是SilverLight項目中的MessageBox","o(∩_∩)o 哈哈",MessageBoxButton.OK);
        }

    }

好現在我們看看怎麼在Html頁面調用SilverLight 代碼：

建立一個SilverLight外掛程式，使Javascript可以調用外掛程式裡面註冊的方法。

<!-- 
通常會使用這個對象標籤方法 創造Silverlight外掛程式
-->
<body style="height: 100%;">
<div id="mySilverlightHost" style="height: 100%;">
<script type="text/javascript">
var host = document.getElementById("mySilverlightHost");

//建立一個指定的對象並返回對它的引用。
            Silverlight.createObjectEx({
//設定建立對象的資料來源
                source: "ClientBin/ReferencingFromScript.xap",
//設定對象層次的父物件
                parentElement: host,
//設定唯一標識id
                id: "mySilverlightControl",
//設定屬性
                properties: {
                    height: "100%",
                    width: "100%",
                    version: "2.0"
                },
                events: {}
            });    
</script>
</div>
<input type="button" onclick="buttonClick();" value="調用SilverLight方法" />
</body>

寫Javascript類來調用方法：

<head>
<title>Silverlight Project Test Page </title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript">
function buttonClick() {
//擷取SilverLight外掛程式中 以建立的對象
            var plugin = document.getElementById("mySilverlightControl");
//執行SilverLight項目中已經註冊的可被Javascript調用的方法
            plugin.content.Button.ExecuteWebService();
        }
</script>
</head>

大功告成！！！

源碼下載

作者：記憶逝去的青春
出處：http://www.cnblogs.com/lukun/
本文著作權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文串連，如有問題，可以通過http://www.cnblogs.com/lukun/ 聯絡我，非常感謝。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More