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