<!doctype html>
< html class = "default no-js" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< title > Webview | VS Code API 中文文档< / title >
< meta name = "description" content = "Documentation for VS Code API 中文文档" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href = "../assets/css/main.css" >
< script async src = "../assets/js/search.js" id = "search-script" > < / script >
< / head >
< body >
< header >
< div class = "tsd-page-toolbar" >
< div class = "container" >
< div class = "table-wrap" >
< div class = "table-cell" id = "tsd-search" data-index = "../assets/js/search.json" data-base = ".." >
< div class = "field" >
< label for = "tsd-search-field" class = "tsd-widget search no-caption" > Search< / label >
< input id = "tsd-search-field" type = "text" / >
< / div >
< ul class = "results" >
< li class = "state loading" > Preparing search index...< / li >
< li class = "state failure" > The search index is not available< / li >
< / ul >
< a href = "../index.html" class = "title" > VS Code API 中文文档< / a >
< / div >
< div class = "table-cell" id = "tsd-widgets" >
< div id = "tsd-filter" >
< a href = "#" class = "tsd-widget options no-caption" data-toggle = "options" > Options< / a >
< div class = "tsd-filter-group" >
< div class = "tsd-select" id = "tsd-filter-visibility" >
< span class = "tsd-select-label" > All< / span >
< ul class = "tsd-select-list" >
< li data-value = "public" > Public< / li >
< li data-value = "protected" > Public/Protected< / li >
< li data-value = "private" class = "selected" > All< / li >
< / ul >
< / div >
< input type = "checkbox" id = "tsd-filter-inherited" checked / >
< label class = "tsd-widget" for = "tsd-filter-inherited" > Inherited< / label >
< input type = "checkbox" id = "tsd-filter-externals" checked / >
< label class = "tsd-widget" for = "tsd-filter-externals" > Externals< / label >
< / div >
< / div >
< a href = "#" class = "tsd-widget menu no-caption" data-toggle = "menu" > Menu< / a >
< / div >
< / div >
< / div >
< / div >
< div class = "tsd-page-title" >
< div class = "container" >
< ul class = "tsd-breadcrumb" >
< li >
< a href = "../index.html" > VS Code API 中文文档< / a >
< / li >
< li >
< a href = "Webview.html" > Webview< / a >
< / li >
< / ul >
< h1 > Interface Webview< / h1 >
< / div >
< / div >
< / header >
< div class = "container container-main" >
< div class = "row" >
< div class = "col-8 col-content" >
< section class = "tsd-panel tsd-comment" >
< div class = "tsd-comment tsd-typography" >
< div class = "lead" >
< p > Displays html content, similarly to an iframe.< / p >
< / div >
< / div >
< / section >
< section class = "tsd-panel tsd-hierarchy" >
< h3 > Hierarchy< / h3 >
< ul class = "tsd-hierarchy" >
< li >
< span class = "target" > Webview< / span >
< / li >
< / ul >
< / section >
< section class = "tsd-panel-group tsd-index-group" >
< h2 > 索引< / h2 >
< section class = "tsd-panel tsd-index-panel" >
< div class = "tsd-index-content" >
< section class = "tsd-index-section " >
< h3 > Properties< / h3 >
< ul class = "tsd-index-list" >
< li class = "tsd-kind-property tsd-parent-kind-interface" > < a href = "Webview.html#options" class = "tsd-kind-icon" > options< / a > < / li >
< li class = "tsd-kind-property tsd-parent-kind-interface" > < a href = "Webview.html#html" class = "tsd-kind-icon" > html< / a > < / li >
< li class = "tsd-kind-property tsd-parent-kind-interface" > < a href = "Webview.html#onDidReceiveMessage" class = "tsd-kind-icon" > on< wbr > Did< wbr > Receive< wbr > Message< / a > < / li >
< li class = "tsd-kind-property tsd-parent-kind-interface" > < a href = "Webview.html#cspSource" class = "tsd-kind-icon" > csp< wbr > Source< / a > < / li >
< / ul >
< / section >
< section class = "tsd-index-section " >
< h3 > Methods< / h3 >
< ul class = "tsd-index-list" >
< li class = "tsd-kind-method tsd-parent-kind-interface" > < a href = "Webview.html#postMessage" class = "tsd-kind-icon" > post< wbr > Message< / a > < / li >
< li class = "tsd-kind-method tsd-parent-kind-interface" > < a href = "Webview.html#asWebviewUri" class = "tsd-kind-icon" > as< wbr > Webview< wbr > Uri< / a > < / li >
< / ul >
< / section >
< / div >
< / section >
< / section >
< section class = "tsd-panel-group tsd-member-group " >
< h2 > Properties< / h2 >
< section class = "tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface" >
< a name = "options" class = "tsd-anchor" > < / a >
< h3 > options< / h3 >
< div class = "tsd-signature tsd-kind-icon" > options< span class = "tsd-signature-symbol" > :< / span > < a href = "WebviewOptions.html" class = "tsd-signature-type" data-tsd-kind = "Interface" > WebviewOptions< / a > < / div >
< aside class = "tsd-sources" >
< ul >
< li > Defined in < a href = "https://github.com/youngjuning/vscode-api-cn/blob/7a0369f/vscode.d.ts#L7437" > vscode.d.ts:7437< / a > < / li >
< / ul >
< / aside >
< div class = "tsd-comment tsd-typography" >
< div class = "lead" >
< p > Content settings for the webview.< / p >
< / div >
< / div >
< / section >
< section class = "tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface" >
< a name = "html" class = "tsd-anchor" > < / a >
< h3 > html< / h3 >
< div class = "tsd-signature tsd-kind-icon" > html< span class = "tsd-signature-symbol" > :< / span > < span class = "tsd-signature-type" > string< / span > < / div >
< aside class = "tsd-sources" >
< ul >
< li > Defined in < a href = "https://github.com/youngjuning/vscode-api-cn/blob/7a0369f/vscode.d.ts#L7464" > vscode.d.ts:7464< / a > < / li >
< / ul >
< / aside >
< div class = "tsd-comment tsd-typography" >
< div class = "lead" >
< p > HTML contents of the webview.< / p >
< / div >
< p > This should be a complete, valid html document. Changing this property causes the webview to be reloaded.< / p >
< p > Webviews are sandboxed from normal extension process, so all communication with the webview must use
message passing. To send a message from the extension to the webview, use < a href = "Webview.html#postMessage" > < code > postMessage< / code > < / a > .
To send message from the webview back to an extension, use the < code > acquireVsCodeApi< / code > function inside the webview
to get a handle to the editor' s api and then call < code > .postMessage()< / code > :< / p >
< pre > < code class = "language-html" > < span style = "color: #800000" > < script> < / span >
< span style = "color: #000000FF" > < / span > < span style = "color: #0000FF" > const< / span > < span style = "color: #000000FF" > < / span > < span style = "color: #0070C1" > vscode< / span > < span style = "color: #000000FF" > < / span > < span style = "color: #000000" > =< / span > < span style = "color: #000000FF" > < / span > < span style = "color: #795E26" > acquireVsCodeApi< / span > < span style = "color: #000000FF" > (); < / span > < span style = "color: #008000" > // acquireVsCodeApi can only be invoked once< / span >
< span style = "color: #000000FF" > < / span > < span style = "color: #001080" > vscode< / span > < span style = "color: #000000FF" > .< / span > < span style = "color: #795E26" > postMessage< / span > < span style = "color: #000000FF" > ({ < / span > < span style = "color: #001080" > message:< / span > < span style = "color: #000000FF" > < / span > < span style = "color: #A31515" > ' hello!' < / span > < span style = "color: #000000FF" > });< / span >
< span style = "color: #800000" > < /script> < / span >
< / code > < / pre >
< p > To load a resources from the workspace inside a webview, use the < a href = "Webview.html#asWebviewUri" > < code > asWebviewUri< / code > < / a > method
and ensure the resource' s directory is listed in < a href = "WebviewOptions.html#localResourceRoots" > < code > WebviewOptions.localResourceRoots< / code > < / a > .< / p >
< p > Keep in mind that even though webviews are sandboxed, they still allow running scripts and loading arbitrary content,
so extensions must follow all standard web security best practices when working with webviews. This includes
properly sanitizing all untrusted input (including content from the workspace) and
setting a < a href = "https://aka.ms/vscode-api-webview-csp" > content security policy< / a > .< / p >
< / div >
< / section >
< section class = "tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface" >
< a name = "onDidReceiveMessage" class = "tsd-anchor" > < / a >
< h3 > < span class = "tsd-flag ts-flagReadonly" > Readonly< / span > on< wbr > Did< wbr > Receive< wbr > Message< / h3 >
< div class = "tsd-signature tsd-kind-icon" > on< wbr > Did< wbr > Receive< wbr > Message< span class = "tsd-signature-symbol" > :< / span > < a href = "Event.html" class = "tsd-signature-type" data-tsd-kind = "Interface" > Event< / a > < span class = "tsd-signature-symbol" > < < / span > < span class = "tsd-signature-type" > any< / span > < span class = "tsd-signature-symbol" > > < / span > < / div >
< aside class = "tsd-sources" >
< ul >
< li > Defined in < a href = "https://github.com/youngjuning/vscode-api-cn/blob/7a0369f/vscode.d.ts#L7473" > vscode.d.ts:7473< / a > < / li >
< / ul >
< / aside >
< div class = "tsd-comment tsd-typography" >
< div class = "lead" >
< p > Fired when the webview content posts a message.< / p >
< / div >
< p > Webview content can post strings or json serializable objects back to an extension. They cannot
post < code > Blob< / code > , < code > File< / code > , < code > ImageData< / code > and other DOM specific objects since the extension that receives the
message does not run in a browser environment.< / p >
< / div >
< / section >
< section class = "tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface" >
< a name = "cspSource" class = "tsd-anchor" > < / a >
< h3 > < span class = "tsd-flag ts-flagReadonly" > Readonly< / span > csp< wbr > Source< / h3 >
< div class = "tsd-signature tsd-kind-icon" > csp< wbr > Source< span class = "tsd-signature-symbol" > :< / span > < span class = "tsd-signature-type" > string< / span > < / div >
< aside class = "tsd-sources" >
< ul >
< li > Defined in < a href = "https://github.com/youngjuning/vscode-api-cn/blob/7a0369f/vscode.d.ts#L7517" > vscode.d.ts:7517< / a > < / li >
< / ul >
< / aside >
< div class = "tsd-comment tsd-typography" >
< div class = "lead" >
< p > Content security policy source for webview resources.< / p >
< / div >
< p > This is the origin that should be used in a content security policy rule:< / p >
< pre > < code > < span style = "color: #001080" > img< / span > < span style = "color: #000000" > -< / span > < span style = "color: #001080" > src< / span > < span style = "color: #000000" > https: < / span > < span style = "color: #001080" > $< / span > < span style = "color: #000000" > {< / span > < span style = "color: #001080" > webview< / span > < span style = "color: #000000" > .< / span > < span style = "color: #001080" > cspSource< / span > < span style = "color: #000000" > } ...;< / span >
< / code > < / pre >
< / div >
< / section >
< / section >
< section class = "tsd-panel-group tsd-member-group " >
< h2 > Methods< / h2 >
< section class = "tsd-panel tsd-member tsd-kind-method tsd-parent-kind-interface" >
< a name = "postMessage" class = "tsd-anchor" > < / a >
< h3 > post< wbr > Message< / h3 >
< ul class = "tsd-signatures tsd-kind-method tsd-parent-kind-interface" >
< li class = "tsd-signature tsd-kind-icon" > post< wbr > Message< span class = "tsd-signature-symbol" > (< / span > message< span class = "tsd-signature-symbol" > : < / span > < span class = "tsd-signature-type" > any< / span > < span class = "tsd-signature-symbol" > )< / span > < span class = "tsd-signature-symbol" > : < / span > < a href = "Thenable.html" class = "tsd-signature-type" data-tsd-kind = "Interface" > Thenable< / a > < span class = "tsd-signature-symbol" > < < / span > < span class = "tsd-signature-type" > boolean< / span > < span class = "tsd-signature-symbol" > > < / span > < / li >
< / ul >
< ul class = "tsd-descriptions" >
< li class = "tsd-description" >
< aside class = "tsd-sources" >
< ul >
< li > Defined in < a href = "https://github.com/youngjuning/vscode-api-cn/blob/7a0369f/vscode.d.ts#L7493" > vscode.d.ts:7493< / a > < / li >
< / ul >
< / aside >
< div class = "tsd-comment tsd-typography" >
< div class = "lead" >
< p > Post a message to the webview content.< / p >
< / div >
< p > Messages are only delivered if the webview is live (either visible or in the
background with < code > retainContextWhenHidden< / code > ).< / p >
< / div >
< h4 class = "tsd-parameters-title" > Parameters< / h4 >
< ul class = "tsd-parameters" >
< li >
< h5 > message: < span class = "tsd-signature-type" > any< / span > < / h5 >
< div class = "tsd-comment tsd-typography" >
< p > Body of the message. This must be a string or other json serializable object.< / p >
< p > For older versions of vscode, if an < code > ArrayBuffer< / code > is included in < code > message< / code > ,
it will not be serialized properly and will not be received by the webview.
Similarly any TypedArrays, such as a < code > Uint8Array< / code > , will be very inefficiently
serialized and will also not be recreated as a typed array inside the webview.< / p >
< p > However if your extension targets vscode 1.57+ in the < code > engines< / code > field of its
< code > package.json< / code > , any < code > ArrayBuffer< / code > values that appear in < code > message< / code > will be more
efficiently transferred to the webview and will also be correctly recreated inside
of the webview.< / p >
< / div >
< / li >
< / ul >
< h4 class = "tsd-returns-title" > Returns < a href = "Thenable.html" class = "tsd-signature-type" data-tsd-kind = "Interface" > Thenable< / a > < span class = "tsd-signature-symbol" > < < / span > < span class = "tsd-signature-type" > boolean< / span > < span class = "tsd-signature-symbol" > > < / span > < / h4 >
< / li >
< / ul >
< / section >
< section class = "tsd-panel tsd-member tsd-kind-method tsd-parent-kind-interface" >
< a name = "asWebviewUri" class = "tsd-anchor" > < / a >
< h3 > as< wbr > Webview< wbr > Uri< / h3 >
< ul class = "tsd-signatures tsd-kind-method tsd-parent-kind-interface" >
< li class = "tsd-signature tsd-kind-icon" > as< wbr > Webview< wbr > Uri< span class = "tsd-signature-symbol" > (< / span > localResource< span class = "tsd-signature-symbol" > : < / span > < a href = "../classes/Uri.html" class = "tsd-signature-type" data-tsd-kind = "Class" > Uri< / a > < span class = "tsd-signature-symbol" > )< / span > < span class = "tsd-signature-symbol" > : < / span > < a href = "../classes/Uri.html" class = "tsd-signature-type" data-tsd-kind = "Class" > Uri< / a > < / li >
< / ul >
< ul class = "tsd-descriptions" >
< li class = "tsd-description" >
< aside class = "tsd-sources" >
< ul >
< li > Defined in < a href = "https://github.com/youngjuning/vscode-api-cn/blob/7a0369f/vscode.d.ts#L7506" > vscode.d.ts:7506< / a > < / li >
< / ul >
< / aside >
< div class = "tsd-comment tsd-typography" >
< div class = "lead" >
< p > Convert a uri for the local file system to one that can be used inside webviews.< / p >
< / div >
< p > Webviews cannot directly load resources from the workspace or local file system using < code > file:< / code > uris. The
< code > asWebviewUri< / code > function takes a local < code > file:< / code > uri and converts it into a uri that can be used inside of
a webview to load the same resource:< / p >
< pre > < code class = "language-ts" > < span style = "color: #001080" > webview< / span > < span style = "color: #000000" > .< / span > < span style = "color: #001080" > html< / span > < span style = "color: #000000" > = < / span > < span style = "color: #A31515" > `< img src=" < / span > < span style = "color: #0000FF" > ${< / span > < span style = "color: #001080" > webview< / span > < span style = "color: #000000FF" > .< / span > < span style = "color: #795E26" > asWebviewUri< / span > < span style = "color: #000000FF" > (< / span > < span style = "color: #001080" > vscode< / span > < span style = "color: #000000FF" > .< / span > < span style = "color: #001080" > Uri< / span > < span style = "color: #000000FF" > .< / span > < span style = "color: #795E26" > file< / span > < span style = "color: #000000FF" > (< / span > < span style = "color: #A31515" > ' /Users/codey/workspace/cat.gif' < / span > < span style = "color: #000000FF" > ))< / span > < span style = "color: #0000FF" > }< / span > < span style = "color: #A31515" > " > `< / span >
< / code > < / pre >
< / div >
< h4 class = "tsd-parameters-title" > Parameters< / h4 >
< ul class = "tsd-parameters" >
< li >
< h5 > localResource: < a href = "../classes/Uri.html" class = "tsd-signature-type" data-tsd-kind = "Class" > Uri< / a > < / h5 >
< / li >
< / ul >
< h4 class = "tsd-returns-title" > Returns < a href = "../classes/Uri.html" class = "tsd-signature-type" data-tsd-kind = "Class" > Uri< / a > < / h4 >
< / li >
< / ul >
< / section >
< / section >
< / div >
< div class = "col-4 col-menu menu-sticky-wrap menu-highlight" >
< nav class = "tsd-navigation primary" >
< ul >
< li class = " " >
< a href = "../index.html" > Exports< / a >
< / li >
< / ul >
< / nav >
< nav class = "tsd-navigation secondary menu-sticky" >
< ul class = "before-current" >
< / ul >
< ul class = "current" >
< li class = "current tsd-kind-interface" >
< a href = "Webview.html" class = "tsd-kind-icon" > Webview< / a >
< ul >
< li class = " tsd-kind-property tsd-parent-kind-interface" >
< a href = "Webview.html#options" class = "tsd-kind-icon" > options< / a >
< / li >
< li class = " tsd-kind-property tsd-parent-kind-interface" >
< a href = "Webview.html#html" class = "tsd-kind-icon" > html< / a >
< / li >
< li class = " tsd-kind-property tsd-parent-kind-interface" >
< a href = "Webview.html#onDidReceiveMessage" class = "tsd-kind-icon" > on< wbr > Did< wbr > Receive< wbr > Message< / a >
< / li >
< li class = " tsd-kind-method tsd-parent-kind-interface" >
< a href = "Webview.html#postMessage" class = "tsd-kind-icon" > post< wbr > Message< / a >
< / li >
< li class = " tsd-kind-method tsd-parent-kind-interface" >
< a href = "Webview.html#asWebviewUri" class = "tsd-kind-icon" > as< wbr > Webview< wbr > Uri< / a >
< / li >
< li class = " tsd-kind-property tsd-parent-kind-interface" >
< a href = "Webview.html#cspSource" class = "tsd-kind-icon" > csp< wbr > Source< / a >
< / li >
< / ul >
< / li >
< / ul >
< ul class = "after-current" >
< / ul >
< / nav >
< / div >
< / div >
< / div >
< footer class = "with-border-bottom" >
< div class = "container" >
< h2 > 图例< / h2 >
< div class = "tsd-legend-group" >
< ul class = "tsd-legend" >
< li class = "tsd-kind-constructor tsd-parent-kind-class" > < span class = "tsd-kind-icon" > Constructor< / span > < / li >
< li class = "tsd-kind-property tsd-parent-kind-class" > < span class = "tsd-kind-icon" > Property< / span > < / li >
< li class = "tsd-kind-method tsd-parent-kind-class" > < span class = "tsd-kind-icon" > Method< / span > < / li >
< / ul >
< ul class = "tsd-legend" >
< li class = "tsd-kind-property tsd-parent-kind-interface" > < span class = "tsd-kind-icon" > Property< / span > < / li >
< li class = "tsd-kind-method tsd-parent-kind-interface" > < span class = "tsd-kind-icon" > Method< / span > < / li >
< / ul >
< ul class = "tsd-legend" >
< li class = "tsd-kind-property tsd-parent-kind-class tsd-is-inherited" > < span class = "tsd-kind-icon" > Inherited property< / span > < / li >
< li class = "tsd-kind-method tsd-parent-kind-class tsd-is-inherited" > < span class = "tsd-kind-icon" > Inherited method< / span > < / li >
< / ul >
< ul class = "tsd-legend" >
< li class = "tsd-kind-property tsd-parent-kind-class tsd-is-static" > < span class = "tsd-kind-icon" > Static property< / span > < / li >
< li class = "tsd-kind-method tsd-parent-kind-class tsd-is-static" > < span class = "tsd-kind-icon" > Static method< / span > < / li >
< / ul >
< / div >
< / div >
< / footer >
< div class = "container tsd-generator" >
< p > Generated by < a href = "https://typedoc.org/" target = "_blank" > TypeDoc< / a > < / p >
< / div >
< div class = "overlay" > < / div >
< script src = "../assets/js/main.js" > < / script >
< / body >
< / html >
