<webview> 标签
描述: |
使用 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); }
标签属性
src
<webview id="foo" src="http://www.google.com/" style="width:640px; height:480px"></webview>
返回可见的 URL,与浏览器多功能框的逻辑类似:如果嵌入者网页产生新的待定的导航则返回它,否则返回最后提交的导航。写入该属性将产生顶层导航。
将 src
设置为它本身的值会重新加载当前网页。
src
属性也可以接受数据 URL,例如
"data:text/plain,Hello, world!"
。
partition
<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 属性,并且还会产生异常。
autosize
<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
容器的大小不能小于最小值或大于最大值。
name
<webview src="https://www.google.com/" name="google-view"></webview>
该属性设置来宾内容的 window.name
对象。
访问打包的资源
默认情况下,WebView 不能加载与应用一起打包的资源。但是可以通过 WebView 分区授予这些资源的访问权限,只要在应用的清单文件中指定
webview.partitions
部分。根据分区名称表达式与文件名表达式的匹配,授予分区访问一部分文件的权限。这两种匹配表达式都可以包含 *
通配符。
考虑如下 manifest.json
片段:
{ "name": "我的扩展程序", ... "permissions": [ "webview" ], "webview": { "partitions": [ // 在这个例子中,所有 <webview partition="static"> 或 // <webview partition="persist:static"> 都能访问 // header.html、footer.html 和 static.png。 { "name": "static", "accessible_resources": ["header.html", "footer.html", "static.png"] }, // 此外,分区名称以“trusted”开头的 WebView(例如 "trusted-foo"、 // "persist:trusted-bar")都能访问以“local_”开头的 .html 文件以及 // .png 和 .js 文件。 { "name": "trusted*", "accessible_resources": ["local_*.html", "*.png", "*.js"] } // 另外,所有 <webview partition="trusted-audio"> 或 // <webview partition="persist:trusted-audio"> 都能访问 // .mp3 文件。注意,还包括“local_*.html”、“*.png”、“*.js”, // 因为 "trusted-audio" 也匹配 "trusted*" 表达式。 { "name": "trusted-audio", "accessible_resources": ["*.mp3"] } // 其他分区中的 WebView 禁止访问打包资源。 ] } }
摘要
类型 | |
---|---|
ClearDataOptions | |
ClearDataTypeSet | |
InjectDetails | |
ContentWindow | |
DialogController | |
FindCallbackResults | |
FindOptions | |
NewWindow | |
MediaPermissionRequest | |
GeolocationPermissionRequest | |
PointerLockPermissionRequest | |
DownloadPermissionRequest | |
FileSystemPermissionRequest | |
LoadPluginPermissionRequest | |
SelectionRect | |
WebRequestEventInteface | |
属性 | |
contentWindow | |
request | |
方法 | |
back −
<webview>.back()
| |
canGoBack −
boolean
<webview>.canGoBack()
| |
canGoForward −
boolean
<webview>.canGoForward()
| |
clearData −
<webview>.clearData( ClearDataOptions options, ClearDataTypeSet types, function callback)
| |
executeScript −
<webview>.executeScript( InjectDetails details, function callback)
| |
find −
<webview>.find(string searchText, FindOptions options, function callback)
| |
forward −
<webview>.forward()
| |
getProcessId −
integer
<webview>.getProcessId()
| |
getUserAgent −
string
<webview>.getUserAgent()
| |
getZoom −
<webview>.getZoom(function callback)
| |
go −
<webview>.go(integer relativeIndex)
| |
insertCSS −
<webview>.insertCSS( InjectDetails details, function callback)
| |
isUserAgentOverridden −
<webview>.isUserAgentOverridden()
| |
print −
<webview>.print()
| |
reload −
<webview>.reload()
| |
setUserAgentOverride −
<webview>.setUserAgentOverride(string userAgent)
| |
setZoom −
<webview>.setZoom(double zoomFactor, function callback)
| |
stop −
<webview>.stop()
| |
stopFinding −
<webview>.stopFinding(enum of
| |
terminate −
<webview>.terminate()
| |
DOM 事件 | |
close | |
consolemessage | |
contentload | |
dialog | |
exit | |
findupdate | |
loadabort | |
loadcommit | |
loadredirect | |
loadstart | |
loadstop | |
newwindow | |
permissionrequest | |
responsive | |
sizechanged | |
unresponsive | |
zoomchange |
类型
ClearDataOptions
从 Chrome 33 开始支持。
属性 | ||
---|---|---|
double | (可选) since |
清除指定日期及指定日期后积累的数据,表示为 1970 年 1 月 1 日以来所经过的毫秒数(可以通过 JavaScript |
ClearDataTypeSet
从 Chrome 33 开始支持。
属性 | ||
---|---|---|
boolean | (可选) appcache |
网站的应用程序缓存。 |
boolean | (可选) cookies |
分区的 Cookie。 |
boolean | (可选) fileSystems |
网站的文件系统。 |
boolean | (可选) history |
分区的历史记录。 |
boolean | (可选) indexedDB |
网站的 IndexedDB 数据。 |
boolean | (可选) localStorage |
网站的本地存储数据。 |
boolean | (可选) webSQL |
网站的 WebSQL 数据。 |
InjectDetails
属性 | ||
---|---|---|
string | (可选) code |
要插入的 JavaScript 或 CSS 代码。 |
string | (可选) file |
要插入的 JavaScript 或 CSS 文件。 |
ContentWindow
方法 | |||||||||
---|---|---|---|---|---|---|---|---|---|
postMessage
ContentWindow.postMessage(any message, string targetOrigin)
只要嵌入内容显示的是来自目标来源的网页,就向嵌入的网页内容发送消息。网页加载完成后该方法才可用,您可以监听 contentload 事件并调用该方法。 来宾可以通过接收到的消息事件中的 该 API 与 HTML5 postMessage API 等价,用于在网页间通信。嵌入者可以在自己的框架上添加
|
DialogController
从 Chrome 33 开始支持。
方法 | ||||||
---|---|---|---|---|---|---|
ok
DialogController.ok(string response)
接受对话框,等价于在
| ||||||
cancel
DialogController.cancel()
拒绝对话框,等价于在 |
FindCallbackResults
从 Chrome 35 开始支持。
属性 | ||
---|---|---|
integer | numberOfMatches |
|
integer | activeMatchOrdinal |
当前匹配项的序号。 |
SelectionRect | selectionRect |
以屏幕坐标表示当前匹配区域。 |
boolean | canceled |
表示本次查找请求是否已经取消。 |
FindOptions
从 Chrome 35 开始支持。
属性 | ||
---|---|---|
boolean | (可选) backward |
以相反顺序查找的标志,默认值为 |
boolean | (可选) matchCase |
匹配时区分大小写的标志,默认值为 |
NewWindow
方法 | ||||||
---|---|---|---|---|---|---|
attach
NewWindow.attach(object webview)
将请求的目标网页附加到现有的
| ||||||
discard
NewWindow.discard()
取消打开新窗口的请求。 |
MediaPermissionRequest
属性 | ||
---|---|---|
string | url |
请求访问用户媒体的框架 URL。 |
方法 | ||
allow
MediaPermissionRequest.allow()
允许权限请求。 | ||
deny
MediaPermissionRequest.deny()
拒绝权限请求。如果没有调用 |
GeolocationPermissionRequest
属性 | ||
---|---|---|
string | url |
请求访问地理位置数据的框架 URL。 |
方法 | ||
allow
GeolocationPermissionRequest.allow()
允许权限请求。 | ||
deny
GeolocationPermissionRequest.deny()
拒绝权限请求。如果没有调用 |
PointerLockPermissionRequest
属性 | ||
---|---|---|
boolean | userGesture |
指针锁定是否通过用户输入操作请求。 |
boolean | lastUnlockedBySelf |
请求的框架是否是最近锁定指针的客户端。 |
string | url |
请求指针锁定的框架 URL。 |
方法 | ||
allow
PointerLockPermissionRequest.allow()
允许权限请求。 | ||
deny
PointerLockPermissionRequest.deny()
拒绝权限请求。如果没有调用 |
DownloadPermissionRequest
从 Chrome 33 开始支持。
属性 | ||
---|---|---|
string | requestMethod |
与下载请求相关联的 HTTP 请求类型(例如 |
string | url |
请求的下载 URL。 |
方法 | ||
allow
DownloadPermissionRequest.allow()
允许权限请求。 | ||
deny
DownloadPermissionRequest.deny()
拒绝权限请求。如果没有调用 |
FileSystemPermissionRequest
从 Chrome 37 开始支持。警告:目前为 Beta 分支。了解更多内容
属性 | ||
---|---|---|
string | url |
请求访问本地文件系统的框架 URL。 |
方法 | ||
allow
FileSystemPermissionRequest.allow()
允许权限请求。 | ||
deny
FileSystemPermissionRequest.deny()
拒绝权限请求。 |
LoadPluginPermissionRequest
从 Chrome 33 开始支持。
属性 | ||
---|---|---|
string | identifier |
插件的标识符字符串。 |
string | name |
插件的显示名称。 |
方法 | ||
allow
LoadPluginPermissionRequest.allow()
允许权限请求。如果没有调用 | ||
deny
LoadPluginPermissionRequest.deny()
拒绝权限请求。 |
SelectionRect
从 Chrome 35 开始支持。
属性 | ||
---|---|---|
integer | left |
屏幕左侧与矩形区域左侧之间的距离。 |
integer | top |
屏幕上侧与矩形区域上侧之间的距离。 |
integer | width |
矩形区域的宽度。 |
integer | height |
矩形区域的高度。 |
WebRequestEventInteface
从 Chrome 33 开始支持。
属性
ContentWindow | <webview>.contentWindow |
可以用来向来宾网页发送消息的对象引用。 |
WebRequestEventInteface | <webview>.request |
从 Chrome 33 开始支持。 使您访问来宾网页上网络请求事件的接口。 |
方法
back
<webview>.back()
如果可能的话,后退导航至历史记录中的前一项,等价于 go(-1)
。
canGoBack
boolean
<webview>.canGoBack()
表示能否后退导航历史记录。
canGoForward
boolean
<webview>.canGoForward()
表示能否前进导航历史记录。
clearData
<webview>.clearData( ClearDataOptions options, ClearDataTypeSet types, function callback)
从 Chrome 33 开始支持。
清除 webview
分区中的浏览数据。
参数 | ||
---|---|---|
ClearDataOptions | options |
指定清除哪些数据的选项。 |
ClearDataTypeSet | types |
要清除的数据类型。 |
function | (可选) callback |
数据成功清除后调用。 如果您指定了 callback 参数,它应该是一个如下形式的函数: function() {...};
|
executeScript
<webview>.executeScript( InjectDetails details, function callback)
向来宾网页插入 JavaScript 代码。
以下示例代码使用脚本插入的方式将来宾网页的背景颜色设置为红色:
webview.executeScript({ code: "document.body.style.backgroundColor = 'red'" });
参数 | |||||
---|---|---|---|---|---|
InjectDetails | details |
要运行的脚本详情。 |
|||
function | (可选) callback |
所有 JavaScript 执行弯后调用。 如果您指定了 callback 参数,它应该是一个如下形式的函数: function(array of any result) {...};
|
find
<webview>.find(string searchText, FindOptions options, function callback)
从 Chrome 35 开始支持。
开始在网页中查找的请求。
参数 | |||||
---|---|---|---|---|---|
string | searchText |
需要在网页中查找的字符串。 |
|||
FindOptions | (可选) options |
查找请求的选项。 |
|||
function | (可选) callback |
本次查找请求的所有结果都返回后调用。 如果您指定了 callback 参数,它应该是一个如下形式的函数: function( FindCallbackResults results) {...};
|
forward
<webview>.forward()
如果可能的话,前进导航至历史记录中的前一项,等价于 go(1)
。
getProcessId
integer
<webview>.getProcessId()
返回来宾网页当前进程所对应的 Chrome 浏览器内部进程标识符,允许嵌入者了解终止该进程会影响多少来宾。只有两个来宾属于同一应用并且具有相同的存储分区标识符时,它们才会共用同一个进程。该调用是同步的,返回嵌入者缓存中的当前进程标识符,这一进程标识符与操作系统的进程标识符不同。
getUserAgent
string
<webview>.getUserAgent()
从 Chrome 33 开始支持。
返回由 webview 来宾网页请求使用的用户代理字符串。
getZoom
<webview>.getZoom(function callback)
从 Chrome 36 开始支持。
获取当前缩放比例。
参数 | |||||
---|---|---|---|---|---|
function | callback |
获取当前缩放比例后调用。 callback 参数应该是一个如下形式的函数: function(double zoomFactor) {...};
|
go
<webview>.go(integer relativeIndex)
通过相对于当前导航的历史记录索引导航至历史记录中的某一项。如果请求的导航不可能完成,该方法没有任何效果。
参数 | ||
---|---|---|
integer | relativeIndex |
webview 应该导航至的相对历史记录索引。例如, |
insertCSS
<webview>.insertCSS( InjectDetails details, function callback)
在来宾网页中嵌入 CSS。
参数 | ||
---|---|---|
InjectDetails | details |
要嵌入的 CSS 详情。 |
function | (可选) callback |
CSS 嵌入后调用。 如果您指定了 callback 参数,它应该是一个如下形式的函数: function() {...};
|
isUserAgentOverridden
<webview>.isUserAgentOverridden()
从 Chrome 33 开始支持。
指示 webview 的用户代理字符串是否由 webviewTag.setUserAgentOverride 覆盖。
<webview>.print()
从 Chrome 38 开始支持。警告:目前为 Dev 分支。了解更多内容
打印 WebView 的内容,等价于在 WebView 中调用 JavaScript print 函数。
reload
<webview>.reload()
重新加载当前的顶层网页。
setUserAgentOverride
<webview>.setUserAgentOverride(string userAgent)
从 Chrome 33 开始支持。
覆盖由 webview 来宾网页请求使用的用户代理字符串。
参数 | ||
---|---|---|
string | userAgent |
要使用的用户代理字符串。 |
setZoom
<webview>.setZoom(double zoomFactor, function callback)
从 Chrome 36 开始支持。
更改网页的当前缩放比例。同样网页来源的缩放比例会保存下来,即使导航之后仍然继续使用。
参数 | ||
---|---|---|
double | zoomFactor |
新的缩放比例。 |
function | (可选) callback |
网页缩放后调用。 如果您指定了 callback 参数,它应该是一个如下形式的函数: function() {...};
|
stop
<webview>.stop()
停止加载当期 <webview> 导航(如果正在进行的话)。
stopFinding
<webview>.stopFinding(enum of "clear"
, "keep"
, or "activate"
action)
从 Chrome 35 开始支持。
结束当前的查找会话(清除所有高亮标记),并取消所有正在进行的查找请求。
参数 | ||
---|---|---|
enum of "clear" , "keep" , or "activate" |
(可选) action |
决定查找会话结束后如何处理目前匹配的内容。 |
terminate
<webview>.terminate()
强制终止来宾网页的渲染进程,这样可能会影响当前应用中共享同一个进程的多个 webview
标签,但不会影响其他应用中的 webview
标签。
DOM 事件
Event
对象,可以包含附加属性,它们会在每一个事件中列出来。
close
来宾窗口尝试将自己关闭时产生。
以下例子在来宾尝试关闭自己时将 webview 导航至 about:blank
。
webview.addEventListener('close', function() { webview.src = 'about:blank'; });
consolemessage
来宾窗口记录控制台消息时产生。
以下例子将所有日志消息转发至嵌入者的控制台,忽略日志级别和其他属性。
webview.addEventListener('consolemessage', function(e) { console.log('来宾网页记录了一条消息:', e.message); });
日志消息的严重性级别,从 0 到 4。
日志消息的内容。
消息来源行号。
表示记录消息的资源的字符串。
contentload
来宾窗口产生 load
事件时产生,即新文档加载之后,不包括当前文档内部的网页导航或异步资源加载。
以下例子在网页加载后修改来宾 body
元素的默认字体大小
webview.addEventListener('contentload', function() { webview.executeScript({ code: 'document.body.style.fontSize = "42px"' }); });
dialog
来宾窗口通过 window.alert
、window.confirm
或 window.prompt
尝试打开有模式对话框时产生。
处理该事件时会阻塞来宾进程,直到每一个事件监听器都返回或 dialog
对象不可访问(如果调用了 preventDefault()
)。
默认行为是取消对话框。
"alert"
, "confirm"
, or "prompt"
来宾请求的有模式对话框类型。
来宾希望在有模式对话框中显示的字符串。
用于响应来宾的有模式对话框请求的接口。
exit
渲染来宾网页内容的进程退出时产生。
以下例子在来宾网页崩溃时显示告别消息:
webview.addEventListener('exit', function(e) { if (e.reason === 'crash') { webview.src = 'data:text/plain,再见!'; } });
退出的进程对应的 Chrome 浏览器内部标识符。
"normal"
, "abnormal"
, "crash"
, or "kill"
表示退出原因的字符串。
findupdate
活动查找请求有新的查找结果可用时产生,随着匹配项被找到,一次查找请求可能会多次产生该事件。
在网页中搜索的字符串。
目前为止在网页中找到的 searchText
数目。
当前匹配内容的序号,如果找到的话,找到之前则一直为 0
。
以屏幕坐标表示当前匹配内容所在区域(如果找到的话)。
表示查找请求是否已经取消。
表示所有查找请求是否都已经完成,不会再产生 findupdate
事件,除非再次发出查找请求。
loadabort
顶层加载未提交就终止时产生。
注:资源加载终止后,最终 loadabort
事件产生之后还会产生loadstop
事件,即使上一次 loadstop
事件(如果有的话)以来所有提交的加载都被终止。
请求的 URL。
本次加载是在顶层还是子框架中。
"networkError"
, "download"
, "canceled"
, "sslError"
, or "safeBrowsingError"
表示终止类型的字符串。
loadcommit
加载提交后产生,包括当前文档内的导航以及子框架的文档级加载,但不包括异步资源加载。
提交的 URL。
本次加载是在顶层还是子框架中。
loadredirect
顶层加载请求重定向至另一个 URL 时产生。
重定向前的请求 URL。
重定向后的 URL。
重定向是在顶层还是子框架中发生。
loadstart
开始加载时产生。
请求的 URL。
本次加载是在顶层还是子框架中。
loadstop
来宾网页中的所有框架级加载操作(包括所有子框架)完成后产生,包括当前文档内的导航以及子框架的文档级加载,但不包括异步资源加载。每当文档级加载的数量从一(或更多)过渡到零时就会产生该事件。例如,如果网页已经加载完成(即产生了一次 loadstop
事件),并创建了一个新的嵌套框架,加载某个网页,嵌套框架的网页加载完成时就会产生第二个 loadstop
事件。加载广告的网页中经常会观察到这样的模式。
注:已提交的加载终止后,loadabort
事件产生后最终还会产生loadstop
事件,即使上一次 loadstop
事件(如果有的话)以来所有提交的加载都被终止。
newwindow
来宾网页尝试打开新的浏览器窗口时产生。
以下例子在嵌入者中为每一个请求的新窗口创建新的 webview
并开始导航:
webview.addEventListener('newwindow', function(e) { var newWebview = document.createElement('webview'); document.body.appendChild(newWebview); e.window.attach(newWebview); });
可以用来将请求的目标网页附加至现有的 webview
元素或显式取消请求的接口。
请求打开新窗口的目标 URL。
请求打开的新窗口的初始宽度。
请求打开的新窗口的初始高度。
请求打开的新窗口名称。
"ignore"
, "save_to_disk"
, "current_tab"
, "new_background_tab"
, "new_foreground_tab"
, "new_window"
, or "new_popup"
请求打开新窗口的方式。
permissionrequest
来宾网页需要向嵌入者请求特殊权限时产生。
以下例子授予来宾网页访问 webkitGetUserMedia
API 的权限。注意,使用该例子的应用本身必须指定 audioCapture
和/或 videoCapture
清单文件权限:
webview.addEventListener('permissionrequest', function(e) { if (e.permission === 'media') { e.request.allow(); } });
"media"
, "geolocation"
, "pointerLock"
, "download"
, "loadplugin"
, or "filesystem"
请求的权限类型。
标志来宾的这一请求的数。
包含请求权限详情的对象,取决于请求的权限类型,可能为 webviewTag.MediaPermissionRequest、webviewTag.GeolocationPermissionRequest、webviewTag.PointerLockPermissionRequest、webviewTag.DownloadPermissionRequest 或 webviewTag.LoadPluginPermissionRequest 对象。
responsive
渲染来宾网页内容的进程失去响应后再恢复响应时产生。
以下例子在 webview
失去响应时淡出,恢复响应时淡入:
webview.style.webkitTransition = 'opacity 250ms'; webview.addEventListener('unresponsive', function() { webview.style.opacity = '0.5'; }); webview.addEventListener('responsive', function() { webview.style.opacity = '1'; });
恢复响应的进程所对应的 Chrome 浏览器内部标识符。
sizechanged
嵌入的网页内容大小更改时产生,只有在启用 autosize
时才会产生。
嵌入的网页内容原来的宽度。
嵌入的网页内容原来的高度。
嵌入的网页内容的新宽度。
嵌入的网页内容的新高度。
unresponsive
渲染来宾网页内容的进程失去响应时产生,如果来宾恢复响应,则会产生与之对应的 responsive 事件。
失去响应的进程所对应的 Chrome 浏览器内部标识符。
zoomchange
网页缩放比例更改时产生。
网页原来的缩放比例。
网页缩放之后的新缩放比例。