The existing webview will see the `destroy` event and will then create a new
webContents when a new url is loaded.
+### `disableguestresize`
+
+```html
+<webview src="https://www.github.com/" disableguestresize></webview>
+```
+
+Prevents the webview contents from resizing when the webview element itself is
+resized.
+
+This can be used in combination with
+[`webContents.setSize`](web-view-tag.md#contentssetsize) to manually
+resize the webview contents in reaction to e.g. window size changes. This can
+make resizing faster compared to relying on the webview element bounds to
+automatically resize the contents.
+
+```javascript
+const {webContents} = require('electron')
+
+// We assume that `win` points to a `BrowserWindow` instance containing a
+// `<webview>` with `disableguestresize`.
+
+win.on('resize', () => {
+ const [width, height] = win.getContentSize()
+ for (let wc of webContents.getAllWebContents()) {
+ // Check if `wc` belongs to a webview in the `win` window.
+ if (wc.hostWebContents &&
+ wc.hostWebContents.id === win.webContents.id) {
+ wc.setSize({
+ normal: {
+ width: width,
+ height: height
+ }
+ })
+ }
+ }
+})
+```
+
## Methods
The `webview` tag has the following methods:
const path = require('path')
const http = require('http')
const url = require('url')
-const {app, session, getGuestWebContents, ipcMain, BrowserWindow} = require('electron').remote
+const {app, session, getGuestWebContents, ipcMain, BrowserWindow, webContents} = require('electron').remote
const {closeWindow} = require('./window-helpers')
describe('<webview> tag', function () {
- this.timeout(20000)
+ this.timeout(60000)
var fixtures = path.join(__dirname, 'fixtures')
document.body.appendChild(div)
})
})
+
+ describe('disableguestresize attribute', () => {
+ it('does not have attribute by default', () => {
+ document.body.appendChild(webview)
+ assert(!webview.hasAttribute('disableguestresize'))
+ })
+
+ it('resizes guest when attribute is not present', done => {
+ w = new BrowserWindow({ show: false, width: 200, height: 200 })
+ w.loadURL('file://' + fixtures + '/pages/webview-guest-resize.html')
+
+ w.webContents.once('did-finish-load', () => {
+ const CONTENT_SIZE = 300
+
+ const elementResizePromise = new Promise(resolve => {
+ ipcMain.once('webview-element-resize', (event, width, height) => {
+ assert.equal(width, CONTENT_SIZE)
+ resolve()
+ })
+ })
+
+ const guestResizePromise = new Promise(resolve => {
+ ipcMain.once('webview-guest-resize', (event, width, height) => {
+ assert.equal(width, CONTENT_SIZE)
+ resolve()
+ })
+ })
+
+ Promise.all([elementResizePromise, guestResizePromise]).then(() => done())
+
+ w.setContentSize(CONTENT_SIZE, CONTENT_SIZE)
+ })
+ })
+
+ it('does not resize guest when attribute is present', done => {
+ w = new BrowserWindow({ show: false, width: 200, height: 200 })
+ w.loadURL('file://' + fixtures + '/pages/webview-no-guest-resize.html')
+
+ w.webContents.once('did-finish-load', () => {
+ const CONTENT_SIZE = 300
+
+ const elementResizePromise = new Promise(resolve => {
+ ipcMain.once('webview-element-resize', (event, width, height) => {
+ assert.equal(width, CONTENT_SIZE)
+ resolve()
+ })
+ })
+
+ const noGuestResizePromise = new Promise(resolve => {
+ const onGuestResize = (event, width, height) => {
+ assert(false, 'unexpected guest resize message')
+ }
+ ipcMain.once('webview-guest-resize', onGuestResize)
+
+ setTimeout(() => {
+ ipcMain.removeListener('webview-guest-resize', onGuestResize)
+ resolve()
+ }, 500)
+ })
+
+ Promise.all([elementResizePromise, noGuestResizePromise]).then(() => done())
+
+ w.setContentSize(CONTENT_SIZE, CONTENT_SIZE)
+ })
+ })
+
+ it('dispatches element resize event even when attribute is present', done => {
+ w = new BrowserWindow({ show: false, width: 200, height: 200 })
+ w.loadURL('file://' + fixtures + '/pages/webview-no-guest-resize.html')
+
+ w.webContents.once('did-finish-load', () => {
+ const CONTENT_SIZE = 300
+
+ ipcMain.once('webview-element-resize', (event, width, height) => {
+ assert.equal(width, CONTENT_SIZE)
+ done()
+ })
+
+ w.setContentSize(CONTENT_SIZE, CONTENT_SIZE)
+ })
+ })
+
+ it('can be manually resized with setSize even when attribute is present', done => {
+ w = new BrowserWindow({ show: false, width: 200, height: 200 })
+ w.loadURL('file://' + fixtures + '/pages/webview-no-guest-resize.html')
+
+ w.webContents.once('did-finish-load', () => {
+ const GUEST_WIDTH = 10
+ const GUEST_HEIGHT = 20
+
+ ipcMain.once('webview-guest-resize', (event, width, height) => {
+ assert.equal(width, GUEST_WIDTH)
+ assert.equal(height, GUEST_HEIGHT)
+ done()
+ })
+
+ for (let wc of webContents.getAllWebContents()) {
+ if (wc.hostWebContents &&
+ wc.hostWebContents.id === w.webContents.id) {
+ wc.setSize({
+ normal: {
+ width: GUEST_WIDTH,
+ height: GUEST_HEIGHT
+ }
+ })
+ }
+ }
+ })
+ })
+ })
})
projects / platform / framework / web / crosswalk-tizen.git / commitdiff