XAML 浏览器应用程序(xbap)与Html 信息交互

背景:
      在做WPF浏览器应用项目时,遇到如下两个问题,通过WPF与Html 信息交互的方式可以解决此类问题。
      ①WPF浏览器应用程序需要使用ClickOne部署,而单纯使用ClickOne部署,发布后的项目无法读取更新后的配置文件,从而导致每次修改配置文件都需要重新发布项目;
      ②WPF浏览器项目,虽然可以用浏览器打开的方式启动项目,但当与其他Web程序联动时,无法读取Http头信息。(WCF通信可以设置头信息,但当前浏览器中的头信息无法获取)

1. xbap项目调用Html 对象

Html 页面中通过iframe 引入xbap 项目

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=8"/> <%--IE8以上无效--%>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	    <title></title>
	    <script >
			var name = "zhangsan";
			
			function GetAge() {
     
			   return "100";
			}
	    </script>
	</head>
	<body>
	    <form id="form1" runat="server">
	        <div style="width:800px;height:800px">
	        	<!-- 引入xbap项目 -->
	            <iframe src="/ClientBin/WpfBrowserApp1.xbap" style="width:800px;height:800px"></iframe>
	        </div>
	    </form>
	</body>
</html>

xbap 项目调用Html 内容

namespace WpfBrowserApp1
{
     
    /// 
    /// Page1.xaml 的交互逻辑
    /// 
    public partial class Page1 : Page
    {
     
        private dynamic scriptObject = null;
        
        public Page1()
        {
     
            InitializeComponent();
            // 提供有关承载 XAML 浏览器应用程序 (XBAP) 应用程序的浏览器环境的信息的帮助器类
            scriptObject = BrowserInteropHelper.HostScript;
        }

        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
     
        	// Html 全局变量的调用
            UserName.Text = Convert.ToString(scriptObject.name);
            // Html 函数的调用
            UserAge.Text = Convert.ToString(scriptObject.GetAge());
        }
    }
}

Html 页面显示
XAML 浏览器应用程序(xbap)与Html 信息交互_第1张图片

2. Html 调用xbap项目内容

WPF 项目中设定允许Html调用的对象类(ForHtml),并在WPF页面初始化时,将该对象传递给Html页面


namespace WpfBrowserApp1
{
     
    // 允许Html调用的对象类
    [ComVisible(true)]
    public class ForHtml
    {
     
        public string WpfMethod(string test)
        {
     
            return "=======WpfMethod=====" + test;
        }
    }
    
    /// 
    /// Page1.xaml 的交互逻辑
    /// 
    public partial class Page1 : Page
    {
     
        private dynamic scriptObject = null;
        public Page1()
        {
     
            scriptObject = BrowserInteropHelper.HostScript;
            // 将WPF对象传递给Html页面
            scriptObject.GetWpfBrowserObject(new ForHtml());
            InitializeComponent();
        }
    }
}

Html 页面中获取WPF对象,点击【WPF调用】按钮,通过已获取到的WPF对象对WPF函数进行调用

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
        <script >
            var WpfBrowserObj = null;
            // 获取WPF对象
            function GetWpfBrowserObject(wpfObj) {
     
                WpfBrowserObj = wpfObj;
            }
            // 调用WPF方法
            function GetWPF() {
     
                alert(WpfBrowserObj.WpfMethod(123));
            }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="width:800px;height:800px">
            <iframe src="/ClientBin/WpfBrowserApp1.xbap" style="width:800px;height:800px"></iframe>
        </div>
        <button onclick="GetWPF()">WPF调用</button>
    </form>
</body>
</html>

调用结果
XAML 浏览器应用程序(xbap)与Html 信息交互_第2张图片

你可能感兴趣的:(XAML)