Home Explore 引导页 在线工具 Blog
Register Sign In
Pchen0
/
electron
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: 7-0-x
Branches Tags
electron
/
lib
/
renderer
/
web-view
/
web-view-impl.ts

web-view-impl.ts 9.3 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271 
  1. import { remote, webFrame } from 'electron'
    2. 

  2. 

  3. import * as ipcRendererUtils from '@electron/internal/renderer/ipc-renderer-internal-utils'
    4. 

  4. import * as guestViewInternal from '@electron/internal/renderer/web-view/guest-view-internal'
    5. 

  5. import { WEB_VIEW_CONSTANTS } from '@electron/internal/renderer/web-view/web-view-constants'
    6. 

  6. import { syncMethods, asyncMethods } from '@electron/internal/common/web-view-methods'
    7. 

  7. 

  8. const v8Util = process.electronBinding('v8_util')
    9. 

  9. 

  10. // ID generator.
    11. 

  11. let nextId = 0
    12. 

  12. 

  13. const getNextId = function () {
    14. 

  14.   return ++nextId
    15. 

  15. }
    16. 

  16. 

  17. // Represents the internal state of the WebView node.
    18. 

  18. export class WebViewImpl {
    19. 

  19.   public beforeFirstNavigation = true
    20. 

  20.   public elementAttached = false
    21. 

  21.   public guestInstanceId?: number
    22. 

  22.   public hasFocus = false
    23. 

  23.   public internalInstanceId?: number;
    24. 

  24.   public resizeObserver?: ResizeObserver;
    25. 

  25.   public userAgentOverride?: string;
    26. 

  26.   public viewInstanceId: number
    27. 

  27. 

  28.   // on* Event handlers.
    29. 

  29.   public on: Record<string, any> = {}
    30. 

  30.   public internalElement: HTMLIFrameElement
    31. 

  31. 

  32.   // Replaced in web-view-attributes
    33. 

  33.   public attributes: Record<string, any> = {}
    34. 

  34.   public setupWebViewAttributes (): void {}
    35. 

  35. 

  36.   constructor (public webviewNode: HTMLElement) {
    37. 

  37.     // Create internal iframe element.
    38. 

  38.     this.internalElement = this.createInternalElement()
    39. 

  39.     const shadowRoot = this.webviewNode.attachShadow({ mode: 'open' })
    40. 

  40.     shadowRoot.innerHTML = '<!DOCTYPE html><style type="text/css">:host { display: flex; }</style>'
    41. 

  41.     this.setupWebViewAttributes()
    42. 

  42.     this.viewInstanceId = getNextId()
    43. 

  43.     shadowRoot.appendChild(this.internalElement)
    44. 

  44. 

  45.     // Provide access to contentWindow.
    46. 

  46.     Object.defineProperty(this.webviewNode, 'contentWindow', {
    47. 

  47.       get: () => {
    48. 

  48.         return this.internalElement.contentWindow
    49. 

  49.       },
    50. 

  50.       enumerable: true
    51. 

  51.     })
    52. 

  52.   }
    53. 

  53. 

  54.   createInternalElement () {
    55. 

  55.     const iframeElement = document.createElement('iframe')
    56. 

  56.     iframeElement.style.flex = '1 1 auto'
    57. 

  57.     iframeElement.style.width = '100%'
    58. 

  58.     iframeElement.style.border = '0'
    59. 

  59.     v8Util.setHiddenValue(iframeElement, 'internal', this)
    60. 

  60.     return iframeElement
    61. 

  61.   }
    62. 

  62. 

  63.   // Resets some state upon reattaching <webview> element to the DOM.
    64. 

  64.   reset () {
    65. 

  65.     // If guestInstanceId is defined then the <webview> has navigated and has
    66. 

  66.     // already picked up a partition ID. Thus, we need to reset the initialization
    67. 

  67.     // state. However, it may be the case that beforeFirstNavigation is false BUT
    68. 

  68.     // guestInstanceId has yet to be initialized. This means that we have not
    69. 

  69.     // heard back from createGuest yet. We will not reset the flag in this case so
    70. 

  70.     // that we don't end up allocating a second guest.
    71. 

  71.     if (this.guestInstanceId) {
    72. 

  72.       this.guestInstanceId = void 0
    73. 

  73.     }
    74. 

  74. 

  75.     this.beforeFirstNavigation = true
    76. 

  76.     this.attributes[WEB_VIEW_CONSTANTS.ATTRIBUTE_PARTITION].validPartitionId = true
    77. 

  77. 

  78.     // Since attachment swaps a local frame for a remote frame, we need our
    79. 

  79.     // internal iframe element to be local again before we can reattach.
    80. 

  80.     const newFrame = this.createInternalElement()
    81. 

  81.     const oldFrame = this.internalElement
    82. 

  82.     this.internalElement = newFrame
    83. 

  83. 

  84.     if (oldFrame && oldFrame.parentNode) {
    85. 

  85.       oldFrame.parentNode.replaceChild(newFrame, oldFrame)
    86. 

  86.     }
    87. 

  87.   }
    88. 

  88. 

  89.   // This observer monitors mutations to attributes of the <webview> and
    90. 

  90.   // updates the BrowserPlugin properties accordingly. In turn, updating
    91. 

  91.   // a BrowserPlugin property will update the corresponding BrowserPlugin
    92. 

  92.   // attribute, if necessary. See BrowserPlugin::UpdateDOMAttribute for more
    93. 

  93.   // details.
    94. 

  94.   handleWebviewAttributeMutation (attributeName: string, oldValue: any, newValue: any) {
    95. 

  95.     if (!this.attributes[attributeName] || this.attributes[attributeName].ignoreMutation) {
    96. 

  96.       return
    97. 

  97.     }
    98. 

  98. 

  99.     // Let the changed attribute handle its own mutation
    100. 

  100.     this.attributes[attributeName].handleMutation(oldValue, newValue)
    101. 

  101.   }
    102. 

  102. 

  103.   onElementResize () {
    104. 

  104.     const resizeEvent = new Event('resize') as ElectronInternal.WebFrameResizeEvent
    105. 

  105.     resizeEvent.newWidth = this.webviewNode.clientWidth
    106. 

  106.     resizeEvent.newHeight = this.webviewNode.clientHeight
    107. 

  107.     this.dispatchEvent(resizeEvent)
    108. 

  108.   }
    109. 

  109. 

  110.   createGuest () {
    111. 

  111.     guestViewInternal.createGuest(this.buildParams()).then(guestInstanceId => {
    112. 

  112.       this.attachGuestInstance(guestInstanceId)
    113. 

  113.     })
    114. 

  114.   }
    115. 

  115. 

  116.   createGuestSync () {
    117. 

  117.     this.beforeFirstNavigation = false
    118. 

  118.     this.attachGuestInstance(guestViewInternal.createGuestSync(this.buildParams()))
    119. 

  119.   }
    120. 

  120. 

  121.   dispatchEvent (webViewEvent: Electron.Event) {
    122. 

  122.     this.webviewNode.dispatchEvent(webViewEvent)
    123. 

  123.   }
    124. 

  124. 

  125.   // Adds an 'on<event>' property on the webview, which can be used to set/unset
    126. 

  126.   // an event handler.
    127. 

  127.   setupEventProperty (eventName: string) {
    128. 

  128.     const propertyName = `on${eventName.toLowerCase()}`
    129. 

  129.     return Object.defineProperty(this.webviewNode, propertyName, {
    130. 

  130.       get: () => {
    131. 

  131.         return this.on[propertyName]
    132. 

  132.       },
    133. 

  133.       set: (value) => {
    134. 

  134.         if (this.on[propertyName]) {
    135. 

  135.           this.webviewNode.removeEventListener(eventName, this.on[propertyName])
    136. 

  136.         }
    137. 

  137.         this.on[propertyName] = value
    138. 

  138.         if (value) {
    139. 

  139.           return this.webviewNode.addEventListener(eventName, value)
    140. 

  140.         }
    141. 

  141.       },
    142. 

  142.       enumerable: true
    143. 

  143.     })
    144. 

  144.   }
    145. 

  145. 

  146.   // Updates state upon loadcommit.
    147. 

  147.   onLoadCommit (webViewEvent: ElectronInternal.WebViewEvent) {
    148. 

  148.     const oldValue = this.webviewNode.getAttribute(WEB_VIEW_CONSTANTS.ATTRIBUTE_SRC)
    149. 

  149.     const newValue = webViewEvent.url
    150. 

  150.     if (webViewEvent.isMainFrame && (oldValue !== newValue)) {
    151. 

  151.       // Touching the src attribute triggers a navigation. To avoid
    152. 

  152.       // triggering a page reload on every guest-initiated navigation,
    153. 

  153.       // we do not handle this mutation.
    154. 

  154.       this.attributes[WEB_VIEW_CONSTANTS.ATTRIBUTE_SRC].setValueIgnoreMutation(newValue)
    155. 

  155.     }
    156. 

  156.   }
    157. 

  157. 

  158.   // Emits focus/blur events.
    159. 

  159.   onFocusChange () {
    160. 

  160.     const hasFocus = document.activeElement === this.webviewNode
    161. 

  161.     if (hasFocus !== this.hasFocus) {
    162. 

  162.       this.hasFocus = hasFocus
    163. 

  163.       this.dispatchEvent(new Event(hasFocus ? 'focus' : 'blur'))
    164. 

  164.     }
    165. 

  165.   }
    166. 

  166. 

  167.   onAttach (storagePartitionId: number) {
    168. 

  168.     return this.attributes[WEB_VIEW_CONSTANTS.ATTRIBUTE_PARTITION].setValue(storagePartitionId)
    169. 

  169.   }
    170. 

  170. 

  171.   buildParams () {
    172. 

  172.     const params: Record<string, any> = {
    173. 

  173.       instanceId: this.viewInstanceId,
    174. 

  174.       userAgentOverride: this.userAgentOverride
    175. 

  175.     }
    176. 

  176. 

  177.     for (const attributeName in this.attributes) {
    178. 

  178.       if (this.attributes.hasOwnProperty(attributeName)) {
    179. 

  179.         params[attributeName] = this.attributes[attributeName].getValue()
    180. 

  180.       }
    181. 

  181.     }
    182. 

  182. 

  183.     return params
    184. 

  184.   }
    185. 

  185. 

  186.   attachGuestInstance (guestInstanceId: number) {
    187. 

  187.     if (!this.elementAttached) {
    188. 

  188.       // The element could be detached before we got response from browser.
    189. 

  189.       return
    190. 

  190.     }
    191. 

  191.     this.internalInstanceId = getNextId()
    192. 

  192.     this.guestInstanceId = guestInstanceId
    193. 

  193. 

  194.     guestViewInternal.attachGuest(
    195. 

  195.       this.internalInstanceId,
    196. 

  196.       this.guestInstanceId,
    197. 

  197.       this.buildParams(),
    198. 

  198.       this.internalElement.contentWindow!
    199. 

  199.     )
    200. 

  200. 

  201.     // ResizeObserver is a browser global not recognized by "standard".
    202. 

  202.     /* globals ResizeObserver */
    203. 

  203.     // TODO(zcbenz): Should we deprecate the "resize" event? Wait, it is not
    204. 

  204.     // even documented.
    205. 

  205.     this.resizeObserver = new ResizeObserver(this.onElementResize.bind(this))
    206. 

  206.     this.resizeObserver.observe(this.internalElement)
    207. 

  207.   }
    208. 

  208. }
    209. 

  209. 

  210. export const setupAttributes = () => {
    211. 

  211.   require('@electron/internal/renderer/web-view/web-view-attributes')
    212. 

  212. }
    213. 

  213. 

  214. // I wish eslint wasn't so stupid, but it is
    215. 

  215. // eslint-disable-next-line
    216. 

  216. export const setupMethods = (WebViewElement: typeof ElectronInternal.WebViewElement) => {
    217. 

  217.   WebViewElement.prototype.getWebContentsId = function () {
    218. 

  218.     const internal = v8Util.getHiddenValue<WebViewImpl>(this, 'internal')
    219. 

  219.     if (!internal.guestInstanceId) {
    220. 

  220.       throw new Error('The WebView must be attached to the DOM and the dom-ready event emitted before this method can be called.')
    221. 

  221.     }
    222. 

  222.     return internal.guestInstanceId
    223. 

  223.   }
    224. 

  224. 

  225.   // WebContents associated with this webview.
    226. 

  226.   WebViewElement.prototype.getWebContents = function () {
    227. 

  227.     if (!remote) {
    228. 

  228.       throw new Error('getGuestWebContents requires remote, which is not enabled')
    229. 

  229.     }
    230. 

  230.     const internal = v8Util.getHiddenValue<WebViewImpl>(this, 'internal')
    231. 

  231.     if (!internal.guestInstanceId) {
    232. 

  232.       internal.createGuestSync()
    233. 

  233.     }
    234. 

  234. 

  235.     return (remote as Electron.RemoteInternal).getGuestWebContents(internal.guestInstanceId!)
    236. 

  236.   }
    237. 

  237. 

  238.   // Focusing the webview should move page focus to the underlying iframe.
    239. 

  239.   WebViewElement.prototype.focus = function () {
    240. 

  240.     this.contentWindow.focus()
    241. 

  241.   }
    242. 

  242. 

  243.   // Forward proto.foo* method calls to WebViewImpl.foo*.
    244. 

  244.   const createBlockHandler = function (method: string) {
    245. 

  245.     return function (this: ElectronInternal.WebViewElement, ...args: Array<any>) {
    246. 

  246.       return ipcRendererUtils.invokeSync('ELECTRON_GUEST_VIEW_MANAGER_CALL', this.getWebContentsId(), method, args)
    247. 

  247.     }
    248. 

  248.   }
    249. 

  249. 

  250.   for (const method of syncMethods) {
    251. 

  251.     (WebViewElement.prototype as Record<string, any>)[method] = createBlockHandler(method)
    252. 

  252.   }
    253. 

  253. 

  254.   const createNonBlockHandler = function (method: string) {
    255. 

  255.     return function (this: ElectronInternal.WebViewElement, ...args: Array<any>) {
    256. 

  256.       return ipcRendererUtils.invoke('ELECTRON_GUEST_VIEW_MANAGER_CALL', this.getWebContentsId(), method, args)
    257. 

  257.     }
    258. 

  258.   }
    259. 

  259. 

  260.   for (const method of asyncMethods) {
    261. 

  261.     (WebViewElement.prototype as Record<string, any>)[method] = createNonBlockHandler(method)
    262. 

  262.   }
    263. 

  263. }
    264. 

  264. 

  265. export const webViewImplModule = {
    266. 

  266.   setupAttributes,
    267. 

  267.   setupMethods,
    268. 

  268.   guestViewInternal,
    269. 

  269.   webFrame,
    270. 

  270.   WebViewImpl
    271. 

  271. }
    272.