TEdgeBrowserでローカルファイルのコンテンツを利用する

Delphiのバージョンは12.1です。

前提条件

  • 本体のHTMLとは別にローカルファイルのコンテンツとしてCSSファイルがある
  • CSSファイルのデザインをHTMLに適用したい

NavigateToStringでHTMLを表示するとセキュリティ上の制限でHTML内に <link rel="stylesheet" href="file://CSSファイル"/> と記述しても読み込まれないため(Not allowed to load local resourceエラー)何らかの対応が必要になります。

対応案

  1. CSSファイルの内容を読み込みHTMLの中に埋め込む
  2. SetVirtualHostNameToFolderMappingを使用して、フォルダーを仮想ホストにマッピングする
  3. HTMLをローカルファイルに書き出す

1. CSSファイルの内容を読み込みHTMLの中に埋め込む

CSSファイルの内容を読み込みHTMLの中に<style>を使って埋め込む方法です。

テキスト処理をするだけなので簡単に対応できます。ただし、CSSファイルの中で別ファイルを参照している場合(例えばbackground-imageでファイル指定など)はうまくいきません。

2. SetVirtualHostNameToFolderMappingを使用してフォルダーを仮想ホストにマッピングする

SetVirtualHostNameToFolderMappingを使用して、フォルダーを仮想ホストにマッピングする方法です。

const
  HostName = 'local';
  Folder = 'c:\temp';
var
  WebView: ICoreWebView2_3;
begin
  if Supports(EdgeBrowser1.DefaultInterface, ICoreWebView2_3, WebView) then
    WebView.SetVirtualHostNameToFolderMapping(PWideChar(HostName),
      PWideChar(Folder), COREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND_ALLOW);
end;

上記の例ではhttp://local/c:\tempフォルダーにアクセスできるようになります。

3. HTMLをローカルファイルに書き出す

HTMLをローカルファイルに書き出して、NavigateToStringの代わりにNavigateを使ってfile://でアクセスする方法です。

Navigateでローカルファイルを表示した場合はそこからfile://でローカルファイルにアクセスできます。

参考リンク