该页面翻译自 Google Chrome Extensions 与 Google Chrome Apps。除非特别说明，该页面的内容遵循 Creative Commons Attribution 3.0 License，代码示例遵循 BSD License。
 chrome
|
|
chrome
|
| 描述： |
使用 webview 标签主动通过网络加载网上的活动内容，并将它嵌入在您的 Chrome 应用中。您的应用可以控制 webview 的外观，与网上内容交互，在嵌入的网页中进行导航，响应其中发生的错误事件等等。（请参见用法）。
|
| 可用版本： |
从 Chrome 25 开始稳定支持。
|
| 权限： |
"webview"
|
使用 webview
标签在您的 Chrome 应用中嵌入“来宾”内容（例如网页）。来宾内容包含在
webview
容器中，您的 Chrome 应用中的嵌入者网页控制来宾内容的布局和渲染方式。
与 iframe 不同，webview
在单独的进程中运行，而不是在您的应用中。它并不拥有您的应用具有的权限，而且您的应用和嵌入内容之间的交互都是异步的，这样可以确保您的应用的安全，不受嵌入内容的影响。
要想在您的应用中嵌入网页，请在您的应用的嵌入者页面（即显示来宾内容的应用页面）中添加
webview 标签。webview 标签最简单的形式包括网页的
src（来源）以及控制 webview 容器外观的 CSS 样式：
<webview id="foo" src="http://www.google.com/" style="width:640px; height:480px"></webview>
如果您希望以任何方式控制来宾内容，您可以编写 JavaScript，监听
webview 事件，并使用
webview 方法响应这些事件。如下是 app.js
中的示例代码，包含两个事件监听器：一个监听网页开始加载，另一个监听网页停止加载，并在加载的时候显示“正在加载...”消息：
onload = function() {
var webview = document.getElementById("foo");
var indicator = document.querySelector(".indicator");
var loadstart = function() {
indicator.innerText = "正在加载...";
}
var loadstop = function() {
indicator.innerText = "";
}
webview.addEventListener("loadstart", loadstart);
webview.addEventListener("loadstop", loadstop);
}
<webview id="foo" src="http://www.google.com/" style="width:640px; height:480px"></webview>
返回可见的 URL，与浏览器多功能框的逻辑类似：如果嵌入者网页产生新的待定的导航则返回它，否则返回最后提交的导航。写入该属性将产生顶层导航。
将 src 设置为它本身的值会重新加载当前网页。
src 属性也可以接受数据 URL，例如
"data:text/plain,Hello, world!"。
<webview id="foo" src="http://www.google.com/" style="width:640px; height:480px" partition="persist:googlepluswidgets"></webview>
webview 标签使用的存储分区标识符。如果存储分区标识符以
persist:
开始（partition="persist:googlepluswidgets"），webview
将使用持久存储分区，对于应用中具有相同存储分区标识符的所有来宾都可用。如果没有设置标识符或者没有
persist: 前缀，webview
将使用内存中的存储分区。只有在第一次导航开始前才能修改该属性值，因为活动渲染器进程的存储分区不能更改。如果之后尝试修改这一值将会失败，并产生
DOM 异常。指定同一个分区标识符，多个 webview 可以共享同一个存储分区。
可能产生的异常：
partition 属性必须有效，导航才能继续。如果指定了无效分区，例如
partition="persist:"，您就无法设置
src 属性，并且还会产生异常。
<webview id="foo" src="http://www.google.com/" style="width:640px; height:480px" autosize="on" minwidth="576" minheight="432"></webview>
如果为 "on"，webview 容器会在 minwidth、minheight、maxwidth 和 maxheight
属性指定的范围内自动调整大小，只有启用 autosize
时这些属性才会影响 webview。启用自动调整大小后，webview 容器的大小不能小于最小值或大于最大值。
<webview src="https://www.google.com/" name="google-view"></webview>
该属性设置来宾内容的 window.name 对象。
只要嵌入内容显示的是来自目标来源的网页，就向嵌入的网页内容发送消息。网页加载完成后该方法才可用，您可以监听 contentload 事件并调用该方法。
来宾可以通过接收到的消息事件中的 event.source 向嵌入者发送回复。
该 API 与 HTML5 postMessage API 等价，用于在网页间通信。嵌入者可以在自己的框架上添加 message 事件监听器来监听回复。
dialog DOM 事件的接口。
拒绝对话框，等价于在 confirm 或 prompt 对话框中单击取消。
newwindow DOM 事件的接口。取消打开新窗口的请求。
request 对象。允许权限请求。
拒绝权限请求。如果没有调用 allow，这是默认行为。
geolocation permissionrequest（地理定位权限请求）DOM 事件的 request 对象。允许权限请求。
拒绝权限请求。如果没有调用 allow，这是默认行为。
pointerLock permissionrequest（指针锁定权限请求）DOM 事件的 request 对象。允许权限请求。
拒绝权限请求。如果没有调用 allow，这是默认行为。
download permissionrequest（下载权限请求）DOM 事件的 request 对象。允许权限请求。
拒绝权限请求。如果没有调用 allow，这是默认行为。
loadplugin permissionrequest（下载权限请求）DOM 事件的 request 对象。
允许权限请求。如果没有调用 deny，这是默认行为。
拒绝权限请求。
为了演示用法上与扩展程序网络请求 API 的区别，考虑以下例子，阻止来宾请求所有匹配 *://www.evil.com/* 的 URL：
webview.request.onBeforeRequest.addListener(
function(details) { return {cancel: true}; },
{urls: ["*://www.evil.com/*"]},
["blocking"]);此外，该接口的 onRequest 和 onMessage 事件还支持声明式网络请求事件，有关 API 详情请参见 declarativeWebRequest。
chrome.webViewRequest.* 对象构造，以下示例代码以声明式的方式阻止 myWebView 中所有发送给 "example.com" 的请求：var rule = {
conditions: [
new chrome.webViewRequest.RequestMatcher({ url: { hostSuffix: 'example.com' } })
],
actions: [ new chrome.webViewRequest.CancelRequest() ]
};
myWebview.request.onRequest.addRules([rule]);
如果可能的话，后退导航至历史记录中的前一项，等价于 go(-1)。
表示能否后退导航历史记录。
表示能否前进导航历史记录。
清除 webview 分区中的浏览数据。
如果您指定了 callback 参数，它应该指定一个如下形式的函数：
function() {...};
向来宾网页插入 JavaScript 代码。
以下示例代码使用脚本插入的方式将来宾网页的背景颜色设置为红色：
webview.executeScript({ code: "document.body.bgColor = 'red'" });
如果您指定了 callback 参数，它应该指定一个如下形式的函数：
function(array of any result) {...};
如果可能的话，前进导航至历史记录中的前一项，等价于 go(1)。
返回来宾网页当前进程所对应的 Chrome 浏览器内部进程标识符，允许嵌入者了解终止该进程会影响多少来宾。只有两个来宾属于同一应用并且具有相同的存储分区标识符时，它们才会共用同一个进程。该调用是同步的，返回嵌入者缓存中的当前进程标识符，这一进程标识符与操作系统的进程标识符不同。
返回由 webview 来宾网页请求使用的用户代理字符串。
在来宾网页中嵌入 CSS。
如果您指定了 callback 参数，它应该指定一个如下形式的函数：
function() {...};
指示 webview 的用户代理字符串是否由 setUserAgentOverride 覆盖。
重新加载当前的顶层网页。
停止加载当期 <webview> 导航（如果正在进行的话）。
强制终止来宾网页的渲染进程，这样可能会影响当前应用中共享同一个进程的多个 webview 标签，但不会影响其他应用中的 webview 标签。
Event
对象，可以包含附加属性，它们会在每一个事件中列出来。
来宾窗口尝试将自己关闭时产生。
以下例子在来宾尝试关闭自己时将 webview 导航至 about:blank。
webview.addEventListener('close', function() {
webview.src = 'about:blank';
});
来宾窗口产生 load 事件时产生。
以下例子在网页加载后修改来宾 body 元素的默认字体大小
webview.addEventListener('contentload', function() {
webview.executeScript({ code: 'document.body.style.fontSize = "42px"' });
});
来宾窗口通过 window.alert、window.confirm 或 window.prompt 尝试打开有模式对话框时产生。
处理该事件时会阻塞来宾进程，直到每一个事件监听器都返回或 dialog 对象不可访问（如果调用了 preventDefault()）。
默认行为是取消对话框。
来宾网页中的所有加载操作（包括所有子框架）完成后产生，除此之外也会产生相关的 loadcommit 或 loadabort 事件，这些对每个框架都会产生。
来宾网页尝试打开新的浏览器窗口时产生。
以下例子在嵌入者中为每一个请求的新窗口创建新的 webview 并开始导航：
webview.addEventListener('newwindow', function(e) {
var newWebview = document.createElement('webview');
document.body.appendChild(newWebview);
e.window.attach(newWebview);
});
webview 元素或显式取消请求的接口。
来宾网页需要向嵌入者请求特殊权限时产生。
以下例子授予来宾网页访问 webkitGetUserMedia API 的权限。注意，使用该例子的应用本身必须指定 audioCapture 和/或 videoCapture 清单文件权限：
webview.addEventListener('permissionrequest', function(e) {
if (e.permission === 'media') {
e.request.allow();
}
});
渲染来宾网页内容的进程失去响应后再恢复响应时产生。
以下例子在 webview 失去响应时淡出，恢复响应时淡入：
webview.style.webkitTransition = 'opacity 250ms';
webview.addEventListener('unresponsive', function() {
webview.style.opacity = '0.5';
});
webview.addEventListener('responsive', function() {
webview.style.opacity = '1';
});