You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
vscode-api-cn.js/interfaces/vscode.Webview.html

415 lines
24 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!doctype html>
<html class="default no-js" lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Webview | VS Code API 中文文档</title>
<meta name="description" content="VS Code API 是一系列你可以在 Visual Studio Code 扩展中调用的 JavaScript API这个站点列出了扩展开发者可以使用的所有 vscode api 中文文档,是 vscode 插件开发必备。">
<meta name="author" content="洛竹">
<meta name="copyright" content="洛竹">
<meta property="og:title" content="Vscode Api 中文文档" />
<meta property="og:type" content="docs">
<meta property="og:image" content="https://code.visualstudio.com/favicon.ico" />
<meta property="og:url" content="https://vscode-api-cn.js.org/index.html">
<meta property="og:site_name" content="Vscode Api 中文文档">
<meta property="og:description" content="VS Code API 是一系列你可以在 Visual Studio Code 扩展中调用的 JavaScript API这个站点列出了扩展开发者可以使用的所有 vscode api 中文文档,是 vscode 插件开发必备。">
<meta property="article:tag" content="vscode api">
<meta property="article:tag" content="vscode api 中文文档">
<meta property="article:tag" content="vscode 插件">
<meta property="article:tag" content="vscode 插件开发">
<meta property="article:tag" content="vscode VS Code API 中文文档">
<meta property="article:tag" content="vscode Webview">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="shortcut icon" href="https://code.visualstudio.com/favicon.ico" sizes="128x128">
<link rel='canonical' href='https://vscode-api-cn.js.org/interfaces/vscode.Webview.html' />
<link rel="stylesheet" href="../assets/css/main.css">
<script async src="../assets/js/search.js" id="search-script"></script>
<meta name="baidu-site-verification" content="codeva-3X25ouCcqY" />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7962287588031867" crossorigin="anonymous"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-T4TRRS1LB1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-T4TRRS1LB1');
</script>
<style>
.container-main {
padding-bottom: 50px;
}
</style>
</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="../modules.html">VS Code API 中文文档</a>
</li>
<li>
<a href="../modules/vscode.html">vscode</a>
</li>
<li>
<a href="vscode.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">
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5641491107630454" data-ad-slot="1206633556" data-page-url="https://nablepart.com" data-override-format="true" data-ad-format="auto" data-full-width-responsive="true"></ins>
<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>层级</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>Properties4</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-property tsd-parent-kind-interface"><a href="vscode.Webview.html#options" class="tsd-kind-icon">options</a></li>
<li class="tsd-kind-property tsd-parent-kind-interface"><a href="vscode.Webview.html#html" class="tsd-kind-icon">html</a></li>
<li class="tsd-kind-property tsd-parent-kind-interface"><a href="vscode.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="vscode.Webview.html#cspSource" class="tsd-kind-icon">csp<wbr>Source</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Methods2</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-method tsd-parent-kind-interface"><a href="vscode.Webview.html#postMessage" class="tsd-kind-icon">post<wbr>Message</a></li>
<li class="tsd-kind-method tsd-parent-kind-interface"><a href="vscode.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>Properties4</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="vscode.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.js.org/blob/3e14418/vscode.d.ts#L7410">vscode.d.ts:7410</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.js.org/blob/3e14418/vscode.d.ts#L7437">vscode.d.ts:7437</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="vscode.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&#39;s api and then call <code>.postMessage()</code>:</p>
<pre><code class="language-html"><span style="color: #800000">&lt;script&gt;</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">&#039;hello!&#039;</span><span style="color: #000000FF"> });</span>
<span style="color: #800000">&lt;/script&gt;</span>
</code></pre>
<p>To load a resources from the workspace inside a webview, use the <a href="vscode.Webview.html#asWebviewUri"><code>asWebviewUri</code></a> method
and ensure the resource&#39;s directory is listed in <a href="vscode.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="vscode.Event.html" class="tsd-signature-type" data-tsd-kind="Interface">Event</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/youngjuning/vscode-api-cn.js.org/blob/3e14418/vscode.d.ts#L7446">vscode.d.ts:7446</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.js.org/blob/3e14418/vscode.d.ts#L7490">vscode.d.ts:7490</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>Methods2</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">&lt;</span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">&gt;</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.js.org/blob/3e14418/vscode.d.ts#L7466">vscode.d.ts:7466</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">&lt;</span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">&gt;</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/vscode.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/vscode.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.js.org/blob/3e14418/vscode.d.ts#L7479">vscode.d.ts:7479</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">`&lt;img src=&quot;</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">&#039;/Users/codey/workspace/cat.gif&#039;</span><span style="color: #000000FF">))</span><span style="color: #0000FF">}</span><span style="color: #A31515">&quot;&gt;`</span>
</code></pre>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>localResource: <a href="../classes/vscode.Uri.html" class="tsd-signature-type" data-tsd-kind="Class">Uri</a></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="../classes/vscode.Uri.html" class="tsd-signature-type" data-tsd-kind="Class">Uri</a></h4>
</li>
</ul>
</section>
</section>
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5641491107630454" data-ad-slot="5596588097" data-page-url="https://nablepart.com" data-override-format="true" data-ad-format="auto" data-full-width-responsive="true"></ins>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class=" ">
<a href="../modules.html">Exports</a>
</li>
<li class="current tsd-kind-namespace">
<a href="../modules/vscode.html">vscode</a>
<ul>
<li class=" tsd-kind-namespace tsd-parent-kind-namespace">
<a href="../modules/vscode.authentication.html">authentication</a>
</li>
<li class=" tsd-kind-namespace tsd-parent-kind-namespace">
<a href="../modules/vscode.commands.html">commands</a>
</li>
<li class=" tsd-kind-namespace tsd-parent-kind-namespace">
<a href="../modules/vscode.comments.html">comments</a>
</li>
<li class=" tsd-kind-namespace tsd-parent-kind-namespace">
<a href="../modules/vscode.debug.html">debug</a>
</li>
<li class=" tsd-kind-namespace tsd-parent-kind-namespace">
<a href="../modules/vscode.env.html">env</a>
</li>
<li class=" tsd-kind-namespace tsd-parent-kind-namespace">
<a href="../modules/vscode.extensions.html">extensions</a>
</li>
<li class=" tsd-kind-namespace tsd-parent-kind-namespace">
<a href="../modules/vscode.languages.html">languages</a>
</li>
<li class=" tsd-kind-namespace tsd-parent-kind-namespace">
<a href="../modules/vscode.notebooks.html">notebooks</a>
</li>
<li class=" tsd-kind-namespace tsd-parent-kind-namespace">
<a href="../modules/vscode.scm.html">scm</a>
</li>
<li class=" tsd-kind-namespace tsd-parent-kind-namespace">
<a href="../modules/vscode.tasks.html">tasks</a>
</li>
<li class=" tsd-kind-namespace tsd-parent-kind-namespace">
<a href="../modules/vscode.tests.html">tests</a>
</li>
<li class=" tsd-kind-namespace tsd-parent-kind-namespace">
<a href="../modules/vscode.window.html">window</a>
</li>
<li class=" tsd-kind-namespace tsd-parent-kind-namespace">
<a href="../modules/vscode.workspace.html">workspace</a>
</li>
</ul>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<div style="width: 200px">
<script async="async" type="text/javascript" id="clstr_globe" src="//clustrmaps.com/globe.js?d=cMnk-gSDNcAzNMMm67U8rWRaHnjUc0Xb0giSGndepK4"></script>
</div>
<ul class="before-current">
</ul>
<ul class="current">
<li class="current tsd-kind-interface tsd-parent-kind-namespace">
<a href="vscode.Webview.html" class="tsd-kind-icon">Webview</a>
<ul>
<li class=" tsd-kind-property tsd-parent-kind-interface">
<a href="vscode.Webview.html#options" class="tsd-kind-icon">options</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-interface">
<a href="vscode.Webview.html#html" class="tsd-kind-icon">html</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-interface">
<a href="vscode.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="vscode.Webview.html#postMessage" class="tsd-kind-icon">post<wbr>Message</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-interface">
<a href="vscode.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="vscode.Webview.html#cspSource" class="tsd-kind-icon">csp<wbr>Source</a>
</li>
</ul>
</li>
</ul>
<ul class="after-current">
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5641491107630454" data-ad-slot="5702084207" data-page-url="https://nablepart.com" data-override-format="true" data-ad-format="auto" data-full-width-responsive="true"></ins>
</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-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>
</div>
</div>
</footer>
<div class="container tsd-generator">
<p>友链:<a href="https://jeasonstudio.gitbooks.io/vscode-cn-doc/content/" target="_blank">VS Code 中文文档</a> | <a href="https://code.visualstudio.com/docs" target="_blank">VS Code 官网文档</a> | <a href="https://marketplace.visualstudio.com/" target="_blank">VS Code 扩展市场</a></p>
<p>Generated by <a href="https://typedoc.org/" target="_blank">TypeDoc</a>. Maintained by <a href="https://youngjuning.js.org" target="_blank">洛竹</a></p>
</div>
<div class="overlay"></div>
<script src="../assets/js/main.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({ 'enable_page_level_ads': true });</script>
</body>
</html>