Merge pull request #7852 from electron/webview-guestinstance

Fix reload/destroy webview guestinstance issues

lib/browser/guest-view-manager.js

@@ -78,7 +78,15 @@ const createGuest = function (embedder, params) {
   guest.on('did-attach', function () {
     params = this.attachParams
     delete this.attachParams
+
+    const previouslyAttached = this.viewInstanceId != null
     this.viewInstanceId = params.instanceId
+
+    // Only load URL and set size on first attach
+    if (previouslyAttached) {
+      return
+    }
+
     this.setSize({
       normal: {
         width: params.elementWidth,
@@ -162,8 +170,12 @@ const attachGuest = function (embedder, elementInstanceId, guestInstanceId, para
   if (guestInstance.elementInstanceId) {
     const oldKey = `${guestInstance.embedder.getId()}-${guestInstance.elementInstanceId}`
     delete embedderElementsMap[oldKey]
-    webViewManager.removeGuest(guestInstance.embedder, guestInstanceId)
-    guestInstance.embedder.send(`ELECTRON_GUEST_VIEW_INTERNAL_DESTROY_GUEST-${guest.viewInstanceId}`)
+
+    // Remove guest from embedder if moving across web views
+    if (guest.viewInstanceId !== params.instanceId) {
+      webViewManager.removeGuest(guestInstance.embedder, guestInstanceId)
+      guestInstance.embedder.send(`ELECTRON_GUEST_VIEW_INTERNAL_DESTROY_GUEST-${guest.viewInstanceId}`)
+    }
   }
 
   const webPreferences = {

lib/renderer/web-view/web-view.js

@@ -72,9 +72,12 @@ class WebViewImpl {
     }
 
     this.webContents = null
-    this.attributes[webViewConstants.ATTRIBUTE_GUESTINSTANCE].setValueIgnoreMutation(undefined)
     this.beforeFirstNavigation = true
     this.attributes[webViewConstants.ATTRIBUTE_PARTITION].validPartitionId = true
+
+    // Set guestinstance last since this can trigger the attachedCallback to fire
+    // when moving the webview using element.replaceChild
+    this.attributes[webViewConstants.ATTRIBUTE_GUESTINSTANCE].setValueIgnoreMutation(undefined)
   }
 
   // Sets the <webview>.request property.
@@ -310,8 +313,8 @@ var registerWebViewElement = function () {
     }
     guestViewInternal.deregisterEvents(internal.viewInstanceId)
     internal.elementAttached = false
-    internal.reset()
     this.internalInstanceId = 0
+    internal.reset()
   }
   proto.attachedCallback = function () {
     var internal, instance

spec/webview-spec.js

@@ -1253,6 +1253,62 @@ describe('<webview> tag', function () {
       webview.src = 'file://' + fixtures + '/api/blank.html'
       document.body.appendChild(webview)
     })
+
+    it('does not delete the guestinstance attribute when moving the webview to another parent node', function (done) {
+      webview.addEventListener('dom-ready', function domReadyListener () {
+        webview.addEventListener('did-attach', function () {
+          assert(webview.guestinstance != null)
+          assert(webview.getWebContents() != null)
+          done()
+        })
+
+        document.body.replaceChild(webview, div)
+      })
+      webview.src = 'file://' + fixtures + '/pages/a.html'
+
+      const div = document.createElement('div')
+      div.appendChild(webview)
+      document.body.appendChild(div)
+    })
+
+    it('does not destroy the webContents when hiding/showing the webview (regression)', function (done) {
+      webview.addEventListener('dom-ready', function domReadyListener () {
+        const instance = webview.getAttribute('guestinstance')
+        assert(instance != null)
+
+        // Wait for event directly since attach happens asynchronously over IPC
+        ipcMain.once('ELECTRON_GUEST_VIEW_MANAGER_ATTACH_GUEST', function () {
+          assert(webview.getWebContents() != null)
+          assert.equal(instance, webview.getAttribute('guestinstance'))
+          done()
+        })
+
+        webview.style.display = 'none'
+        webview.offsetHeight
+        webview.style.display = 'block'
+      })
+      webview.src = 'file://' + fixtures + '/pages/a.html'
+      document.body.appendChild(webview)
+    })
+
+    it('does not reload the webContents when hiding/showing the webview (regression)', function (done) {
+      webview.addEventListener('dom-ready', function domReadyListener () {
+        webview.addEventListener('did-start-loading', function () {
+          done(new Error('webview started loading unexpectedly'))
+        })
+
+        // Wait for event directly since attach happens asynchronously over IPC
+        webview.addEventListener('did-attach', function () {
+          done()
+        })
+
+        webview.style.display = 'none'
+        webview.offsetHeight
+        webview.style.display = 'block'
+      })
+      webview.src = 'file://' + fixtures + '/pages/a.html'
+      document.body.appendChild(webview)
+    })
   })
 
   describe('DOM events', function () {