C# + CefSharpで外部jsファイルを読み込ませたい

前提・実現したいこと

発生している問題・エラーメッセージ

cssファイルとjsファイルを認識してくれません。

該当のソースコード

デザインは、FormにChromiumWebBrowserを1つ(chromiumWebBrowser1)配置しているだけです。

C#
1    public partial class Form1 : Form
2    {
3        private static string StyleSheetFileName = Path.Combine(Application.StartupPath, "style.css");
4        private static string JQuery331MinFileName = Path.Combine(Application.StartupPath, "jquery-3.3.1.min.js");
5        private static string JQueryAutoSizeFileName = Path.Combine(Application.StartupPath, "jquery.autosize.min.js");
6        public Form1()
7        {
8            InitializeComponent();
9            CefSharpSettings.LegacyJavascriptBindingEnabled = true;
10            chromiumWebBrowser1.JavascriptObjectRepository.Register("objectForScripting", new ObjectForScriptiing(), false);
11            Load += Form1_Load;
12        }
13
14        private void Form1_Load(object sender, EventArgs e)
15        {
16            string str = $@"
17<!DOCTYPE html>
18<html>
19<head>
20<meta charset = utf-8>
21<link rel = stylesheet href = {StyleSheetFileName}>
22<script src = {JQuery331MinFileName}></script>
23<script src = {JQueryAutoSizeFileName}></script>
24<script>
25$(function autosize(){{
26  $('textarea').autosize();
27}});
28
29function showMessage(){{
30  objectForScripting.showMessage();
31}}
32</script>
33</head>
34<body>
35<textarea></textarea>
36<input type = button onClick = showMessage()>
37</body>
38</html>
39";
40            chromiumWebBrowser1.LoadHtml(str);
41        }
42    }
43
44    public class ObjectForScriptiing
45    {
46        public ObjectForScriptiing()
47        {
48        }
49        //このshowMessage()はjavascriptで呼び出せる。
50        public void showMessage()
51        {
52            MessageBox.Show("", "");
53        }
54    }

上記を実行して表示されたWebページのソースコードです。

html
1<!DOCTYPE html><html><head>
2<meta charset="utf-8">
3<link rel="stylesheet" href="D:\Projects\Test\Test\bin\x86\Debug\style.css">
4<script src="D:\Projects\Test\Test\bin\x86\Debug\jquery-3.3.1.min.js"></script>
5<script src="D:\Projects\Test\Test\bin\x86\Debug\jquery.autosize.min.js"></script>
6<script>
7$(function autosize(){
8  $('textarea').autosize();
9});
10
11function showMessage(){
12  objectForScripting.showMessage();
13}
14</script>
15</head>
16<body>
17<textarea></textarea>
18<input type="button" onclick="showMessage()">
19
20
21</body></html>

問題点

CSSが適用されず、JQuery(textareaのautosize)が実行されません。
生成されたソースのパスを開くと、cssとjsファイルをきちんと開けますので、パスは正確です。
どうすれば、JQueryを実行出来ますでしょうか。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

退会済みユーザー

2020/03/27 01:45 編集

長くなってしまったので回答欄に移動しました。

行動規範の内容に同意します

回答2件

スキームハンドラーでやるのが正攻法のようです（全然わかっていませんが^^;
Scheme Handler · cefsharp/CefSharp Wiki

引数なしのnew ChromiumWebBrowser()はもう旧型式らしいので、デザイナで張り付けずコードで生成する
LoadHtmlでの読み込みでなくindex.htmlを作成する
index.htmlでは<script src="jquery-3.3.1.min.js"></script>のように記述する

以上で当方では想定通りに動きました（exeと同じフォルダにhtml・js）
文字列から読む方法はわかりませんでした。

cs
1using System.Windows.Forms;
2using CefSharp;
3using CefSharp.SchemeHandler;
4using CefSharp.WinForms;
5
6namespace Questions249641
7{
8    public partial class Form1 : Form
9    {
10        private readonly ChromiumWebBrowser chromiumWebBrowser1;
11
12        public Form1()
13        {
14            InitializeComponent();
15
16            var settings = new CefSettings();
17            settings.RegisterScheme(new CefCustomScheme
18            {
19                SchemeName = "localfolder",
20                DomainName = "cefsharp",
21                SchemeHandlerFactory = new FolderSchemeHandlerFactory(
22                    rootFolder: Application.StartupPath,
23                    hostName: "cefsharp",
24                    defaultPage: "index.html")
25            });
26
27            Cef.Initialize(settings);
28
29            CefSharpSettings.LegacyJavascriptBindingEnabled = true;
30            chromiumWebBrowser1 = new ChromiumWebBrowser("localfolder://cefsharp/");
31            chromiumWebBrowser1.JavascriptObjectRepository.Register("objectForScripting", new ObjectForScriptiing(), false);
32          
33            Controls.Add(chromiumWebBrowser1);
34            chromiumWebBrowser1.Dock = DockStyle.Fill;
35        }
36
37        private void Form1_FormClosing(object sender, FormClosingEventArgs e) => Cef.Shutdown();
38
39        public class ObjectForScriptiing
40        {
41            public void showMessage() => MessageBox.Show("Message", "Title");
42        }
43    }
44}

投稿2020/03/27 10:27

編集2023/07/21 09:10

TN8001

総合スコア9884

実際に検証したわけではなく想像だけなのでハズレかもしれませんが・・・

質問のコードにある D:\Projects というのは .js, .css ファイルを配置した自分の開発マシンのフォルダですよね？

普通はそういうことはしなくて http で始まる url になるのですが、同様な形になるようにローカル IIS の仮想ディレクトリに設定して、そこに .html, .js, .css ファイルを配置して試してみてはいかがですか？　もしくは CDN があればそれを利用してみるとか。

IIS を立てるのが無理なら IIS Express を使うという手もあります。C# の Windows Forms アプリを開発しているようですが、それなら Visual Studio を使ってますよね。テンプレートで ASP.NET Web アプリのプロジェクトを作って Visual Studio から実行すれば、自動的に IIS Express が立ち上がって動きます。

そのプロジェクトのフォルダの適当な場所に .html, .js, .css ファイルを置けば、C# + CefSharp アプリ側から見れば普通に Web サーバーを使った場合と同じ状況になります。

まずブラウザでそこにアクセスして正常に動くことを確認してください。C# + CefSharp アプリがちゃんとできていれば、ブラウザで見た時と同様になると思います。お試しください。

上に書いたように試したわけではないのでハズレだったらすみません。

投稿2020/03/27 01:45

退会済みユーザー

総合スコア0