1
folder
   style.css
   action.js
   index.html
   foo.html
   bar.html

I have a number of html files (which are being created by other task, on the fly) in the structure above:

index.html has hyperlinks for the foo.html and bar.html and they have a hyperlink to return back to home (index.html)

By default, I'm able to show the index html in the webview using the following code:

const workdir = {myPath}   
const webViewOptions: vscode.WebviewPanelOptions & vscode.WebviewOptions = {
  enableScripts: true,
  enableCommandUris: true,
  enableFindWidget: true,
  retainContextWhenHidden: true,
  localResourceRoots: [
      vscode.Uri.file(workdir)
  ]
};

const panel = vscode.window.createWebviewPanel(
  someobj.viewType,
  "My Panel",
  column || vscode.ViewColumn.One,
  webViewOptions
);

const indexHtml = path.join(workdir, file);

const baseHref: vscode.Uri = this._panel.webview.asWebviewUri(
  vscode.Uri.file(workdir)
);

const htmlPathOnDisk: vscode.Uri = vscode.Uri.file(
  indexHtml
);

let htmlContent = fs.readFileSync(htmlPathOnDisk.fsPath, "utf8");
let injection: string = "<head>" + '<base href="' + baseHref + '/"/>';
htmlContent = htmlContent.replace("<head>", injection);
this._panel.webview.html = htmlContent;

However, when I click one of the hyperlinks in the index.html, let's say foo.html:

<a href="foo.html">Click for foo!</a>

VS Code Webview becomes blank, the url pops up in the Google Chrome with following form:

https://file+.vscode-resource.vscode-cdn.net/{myPath}/foo.html

I see this error message in the Developer Console:

Refused to frame 'https://file+.vscode-resource.vscode-cdn.net/' because it violates the following Content Security Policy directive: "frame-src 'self'".

I gave a try for adding a <meta> tag in the html but it haven't worked out so far.

The need is, previewing multiple html files in webview, back and forward using their hyperlinks.

Looking for recommendations.

Thanks

Mr.B
  • 61
  • 1
  • 5
  • 1
    Before showing an HTML page, you have to manually convert all hyper links (such as `foo.html` inside to WebView URIs, and then showing it in the webview, https://code.visualstudio.com/api/extension-guides/webview#loading-local-content – Lex Li Sep 16 '22 at 14:24
  • Thanks for the response. I was looking for a dynamic solution (without changing, injecting anything), but yes that way works. – Mr.B Sep 19 '22 at 07:14

0 Answers0