關於WPF中嵌入WEB頁面
最近工作上專案需要把WPF專案的首頁改的炫一些，想到WPF做不了那麼炫，就算做也很耗時，所以決定把首頁做成Html頁嵌入到WPF中。在網上查了資料，一種是WPF中的WebBrowser控制元件，基於IE核心的，另一種是CefSharp控制元件（需要從Nuget上下載Nuget包），基於Chrome核心，我一開始選的是CefSharp控制元件，但是後來首頁因為要檢視實時監控，無奈換成了WebBrowser控制元件。
過程中遇到了一些問題，相信大家以後都會遇到，下面貼出來：
1.執行起來每次都會出現如圖所示安全提醒，解決方法在web頁面的<head>標籤上添上一句程式碼<!-- saved from url=(0013)about:internet -->
<!DOCTYPE html>
<!-- saved from url=(0013)about:internet -->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>2.如果頁面中用到了Echarts圖表，有可能會顯示不了，解決辦法：對於eCharts在IE相容模式中顯示，需要在web頁面加上一段<meta http-equiv="X-UA-Compatible" content="IE=edge" />。
3.如果需要載入ActiveX控制元件
下面開始說一下WPF和JS的互動。
WPF呼叫JS：
WebBrowser控制元件有自帶的和JS互動的方法InvokeScript，可以直接呼叫和傳參，只研究了淺層次的，深層次的暫時沒研究。
JS呼叫WPF：
WebBrowser控制元件有自帶的和JS互動的方法ObjectForScripting，需要自己定義一個類，然後例項化 webbrowser.ObjectForScripting = new OprateBasic();類裡面寫JS呼叫的WPF方法。
最後把程式碼貼出來供有需要的參考：
WPF前臺：
<Window x:Class="WpfApplication2.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication2"
mc:Ignorable="d"
Title="Window1" Height="600" Width="600">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="100"></RowDefinition>
</Grid.RowDefinitions>
<WebBrowser x:Name="webbrowser"></WebBrowser>
<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
<TextBox x:Name="txtBox" Width="150" Height="40"></TextBox>
<Button Width="150" Height="40" Click="Button_Click">WPF按鈕</Button>
</StackPanel>
</Grid>
</Window>
後臺C#：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace WpfApplication2
{
/// <summary>
/// Window1.xaml 的互動邏輯
/// </summary>
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
webbrowser.Source = new Uri(Environment.CurrentDirectory + @"\Test.html");
webbrowser.ObjectForScripting = new OprateBasic();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
webbrowser.InvokeScript("msg",txtBox.Text);
}
}
}
[System.Runtime.InteropServices.ComVisible(true)] // 將該類設定為com可訪問
public class OprateBasic
{
public void palymusic(string msg)
{
MessageBox.Show( "WPF彈出框："+msg);
}
}
Html：
<!DOCTYPE html>
<!-- saved from url=(0013)about:internet -->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function Test() {
window.external.palymusic($("#txtInput").val());
}
function msg(obj) {
alert("頁面彈出框："+obj);
}
</script>
</head>
<body>
<input type="text" id="txtInput" />
<button onclick="Test()">頁面按鈕</button>
</body>
</html>C#呼叫後臺的Html頁面地址需要注意下，不然執行不了，webbrowser.Source = new Uri(Environment.CurrentDirectory + @"\Test.html");需要把Test.html的檔案屬性複製到輸出目錄改成始終複製。
總結：WPF中嵌入Web頁面要不是頁面攝像頭需要IE模式，我肯定就選擇CefSharp控制元件了，不過也正好熟悉了下WebBrowser控制元件的用法以及WPF和JS的互動。以上就是個小例子，本人從網上查閱資料，整理執行成功的小例子，希望能幫助到有需要的人就夠了。有空會再寫下WPF中CefSharp控制元件的用法和互動。(✪ω✪)
相關推薦
關於WPF中嵌入WEB頁面
最近工作上專案需要把WPF專案的首頁改的炫一些，想到WPF做不了那麼炫，就算做也很耗時，所以決定把首頁做成Html頁嵌入到WPF中。在網上查了資料，一種是WPF中的WebBrowser控制元件，基於IE核心的，另一種是CefSharp控制元件（需要從Nuget上下載Nuget
在WPF中嵌入WebBrowser視覺化頁面
無論是哪種C/S技術，涉及資料視覺化就非常的累贅了，當然大神也一定有，只不過面向大多數人，還是通過網頁來實現，有的時候不想把這兩個功能分開，一般會是客戶的原因，所以我們打算在WPF中嵌入WebBrowser，然後使用ECharts 完成複雜的圖表展示，其功能不亞於一個名為Devexpress的圖示庫，而且
請解釋ASP.NET 中的web 頁面與其隱藏類之間的關系？
.aspx asp 都在 文件 oev 類之間的關系 false 類繼承 asp.net 一個ASP.NET 頁面一般都對應一個隱藏類,一般都在ASP.NET 頁面的聲明中指定了隱藏類例如一個頁面 Tst1.aspx 的頁面聲明如下 <%@ Page language
Android嵌入Web頁面及快取的處理
1.佈局及基本實現 佈局檔案activity_main.xml: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xm
網頁中嵌入外部頁面的四種方法
線上製作icon圖示 http://www.chami.com/html-kit/services/favicon/ 進入主頁以後自動播放聲音 <embed src="http://你的網站/music.rm" hidden=true autostart=true loop=true> 進入主頁
在WPF中嵌入winform控制元件
最近想整理一下WPF中嵌入winform控制元件的相關內容。我認為可分幾步走： 第一步：在專案中新增System.Windows.Forms 和 WindowsFormsIntegration這兩個dll的引用。 第二步：在xaml檔案中新增System.Wi
自定義web字型-通過@font-face在頁面中嵌入 .woff格式字型的引用
woff檔案樣式檢視連結 http://fontstore.baidu.com/static/editor/index.html 上傳woff檔案 即可看到woff檔案的展示效果 woff檔案可以用python的fontTo
web頁面嵌入應用中遇到的 Object.entries is not a function 問題的解決（vue專案）
網上尋找到的答案，原網址點我：因為 es6的generators的entries函式不支援，最後檢視大神的回答才發現：babel只能在構建過程中轉譯語法糖，比如說將ES7/ES6/JSX中的語法部分（例如箭頭函式）轉譯成ES5。而polyfill則是解決原生物件
怎樣把報表放到網頁中顯示（Web頁面與報表簡單集成樣例）
nal 嵌入 自己 rim 框架 ram art ner prim 1.問題描寫敘述 如今用戶開發的系統基本上趨向於BS架構的瀏覽器/server模式。這些系統可能由不同的語言開發。如HTML、ASP、JSP、PHP等。因此須要將制作好的報表嵌入到這些頁面中。 Fine
如何在 HTML5 頁面中嵌入音頻?如何在 HTML5 頁面中嵌入視頻？
brush embed browser port span feature 格式 如何 html5 HTML 5 包含嵌入音頻文件的標準方式，支持的格式包括 MP3、Wav 和 Ogg： <audio controls> <source src="
記錄一次zookeeper集群其中一節點在hbase web頁面中顯示Connection rese
hbase zookeeper 大數據 集群環境：nn1，view和dn1三節點部署的zookeeper集群，gezookeeper進程均已啟動hbase web頁面顯示zk_dump信息如下日誌輸出信息如下： shell> tail -f /var/log/zookeeper/zookee
web頁面中http返回的狀態碼解釋
重新 不能 情況 返回 範圍請求 常見 無法 末尾 有效期 狀態碼類別： ??1xx： 信息類，表示客戶發送的請求服務端正在處理 ??2xx：成功類，服務器 成功接收請求 ??3xx：重定向類，服務器中找到了多個請求內容，則需要用戶再次操作選擇 ??4xx：客戶端
移動web：原生開發打包，嵌入h5頁面 webApp：全部都是H5開發的應用 混合APP：使用第三方開發平臺從apicloud，appcan，hbuilder等開發，cordova技術打包 原生APP：就是eclipse開發或者studio等工具開發
應用 手機 .com net ack 自動連接 pan 經驗 使用 論壇43213 移動端webApp兼容問題解決 談談App混合開發 Hybrid APP混合開發的一些經驗和總結 PhoneGap是一個采用HTML，CSS和JavaScript的技術，創建
IDEA插件開發，Jpane中集成Web頁面
nbsp 框架 好的 java web頁面 http 出現 理想 idea插件 最近，項目組想開發一款插件，其中的功能就有面板中集成本地的Web頁面，網上對這種的需求的方案也有很多種，像JEditorPane，DJNativeSwing，還有jdk自帶的JavaFX的Web
web頁面編寫過程中的中文亂碼問題解決
中文亂碼的出現是由於編碼和解碼的方式不同，只要將二者修改為對應的方式就成。具體解釋如下： 在剛學習web開發的時候常遇見中文亂碼的問題，而且根據網上的教程時而能解決，時而不能，主要原因是很多初學者不知道中文系統的瀏覽器的預設解碼字符集是 GB2312，而我們的編輯器常採用的是 UTF-8的解碼方
通過HTML中的table標籤設定Web頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用table標籤設定Web頁面</title>
小程式嵌入web-view網頁後，點選網頁中的按鈕跳轉回小程式
1.首先在網頁端引入js <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"&
Spring中在web.xml新增,處理頁面顯示亂碼問題 模板
<filter> <filter-name>encodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncod
在jsp頁面中嵌入java程式碼並用request方式接受post資料
<%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN
在web頁面中播放rtsp直播資料流方法
WEB播放RTSP直播資料流方法 在html技術中目前是無法直接使用現有的web技術進行播放rtsp直播資料流的，下面總結了可以是web播放rtsp直播流的方法。只是自己備用。 1，視訊播放功能使用的庫(WebChimera.js) 1.1，WebCh