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

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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286 
  1. import { deprecate, 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 {
    7. 

  7.   syncMethods,
    8. 

  8.   asyncCallbackMethods,
    9. 

  9.   asyncPromiseMethods
    10. 

  10. } from '@electron/internal/common/web-view-methods'
    11. 

  11. 

  12. const v8Util = process.electronBinding('v8_util')
    13. 

  13. 

  14. // ID generator.
    15. 

  15. let nextId = 0
    16. 

  16. 

  17. const getNextId = function () {
    18. 

  18.   return ++nextId
    19. 

  19. }
    20. 

  20. 

  21. // Represents the internal state of the WebView node.
    22. 

  22. export class WebViewImpl {
    23. 

  23.   public beforeFirstNavigation = true
    24. 

  24.   public elementAttached = false
    25. 

  25.   public guestInstanceId?: number
    26. 

  26.   public hasFocus = false
    27. 

  27.   public internalInstanceId?: number;
    28. 

  28.   public resizeObserver?: ResizeObserver;
    29. 

  29.   public userAgentOverride?: string;
    30. 

  30.   public viewInstanceId: number
    31. 

  31. 

  32.   // on* Event handlers.
    33. 

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

  34.   public internalElement: HTMLIFrameElement
    35. 

  35. 

  36.   // Replaced in web-view-attributes
    37. 

  37.   public attributes: Record<string, any> = {}
    38. 

  38.   public setupWebViewAttributes (): void {}
    39. 

  39. 

  40.   constructor (public webviewNode: HTMLElement) {
    41. 

  41.     // Create internal iframe element.
    42. 

  42.     this.internalElement = this.createInternalElement()
    43. 

  43.     const shadowRoot = this.webviewNode.attachShadow({ mode: 'open' })
    44. 

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

  45.     this.setupWebViewAttributes()
    46. 

  46.     this.viewInstanceId = getNextId()
    47. 

  47.     shadowRoot.appendChild(this.internalElement)
    48. 

  48. 

  49.     // Provide access to contentWindow.
    50. 

  50.     Object.defineProperty(this.webviewNode, 'contentWindow', {
    51. 

  51.       get: () => {
    52. 

  52.         return this.internalElement.contentWindow
    53. 

  53.       },
    54. 

  54.       enumerable: true
    55. 

  55.     })
    56. 

  56.   }
    57. 

  57. 

  58.   createInternalElement () {
    59. 

  59.     const iframeElement = document.createElement('iframe')
    60. 

  60.     iframeElement.style.flex = '1 1 auto'
    61. 

  61.     iframeElement.style.width = '100%'
    62. 

  62.     iframeElement.style.border = '0'
    63. 

  63.     v8Util.setHiddenValue(iframeElement, 'internal', this)
    64. 

  64.     return iframeElement
    65. 

  65.   }
    66. 

  66. 

  67.   // Resets some state upon reattaching <webview> element to the DOM.
    68. 

  68.   reset () {
    69. 

  69.     // If guestInstanceId is defined then the <webview> has navigated and has
    70. 

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

  71.     // state. However, it may be the case that beforeFirstNavigation is false BUT
    72. 

  72.     // guestInstanceId has yet to be initialized. This means that we have not
    73. 

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

  74.     // that we don't end up allocating a second guest.
    75. 

  75.     if (this.guestInstanceId) {
    76. 

  76.       guestViewInternal.destroyGuest(this.guestInstanceId)
    77. 

  77.       this.guestInstanceId = void 0
    78. 

  78.     }
    79. 

  79. 

  80.     this.beforeFirstNavigation = true
    81. 

  81.     this.attributes[WEB_VIEW_CONSTANTS.ATTRIBUTE_PARTITION].validPartitionId = true
    82. 

  82. 

  83.     // Since attachment swaps a local frame for a remote frame, we need our
    84. 

  84.     // internal iframe element to be local again before we can reattach.
    85. 

  85.     const newFrame = this.createInternalElement()
    86. 

  86.     const oldFrame = this.internalElement
    87. 

  87.     this.internalElement = newFrame
    88. 

  88. 

  89.     if (oldFrame && oldFrame.parentNode) {
    90. 

  90.       oldFrame.parentNode.replaceChild(newFrame, oldFrame)
    91. 

  91.     }
    92. 

  92.   }
    93. 

  93. 

  94.   // This observer monitors mutations to attributes of the <webview> and
    95. 

  95.   // updates the BrowserPlugin properties accordingly. In turn, updating
    96. 

  96.   // a BrowserPlugin property will update the corresponding BrowserPlugin
    97. 

  97.   // attribute, if necessary. See BrowserPlugin::UpdateDOMAttribute for more
    98. 

  98.   // details.
    99. 

  99.   handleWebviewAttributeMutation (attributeName: string, oldValue: any, newValue: any) {
    100. 

  100.     if (!this.attributes[attributeName] || this.attributes[attributeName].ignoreMutation) {
    101. 

  101.       return
    102. 

  102.     }
    103. 

  103. 

  104.     // Let the changed attribute handle its own mutation
    105. 

  105.     this.attributes[attributeName].handleMutation(oldValue, newValue)
    106. 

  106.   }
    107. 

  107. 

  108.   onElementResize () {
    109. 

  109.     const resizeEvent = new Event('resize') as ElectronInternal.WebFrameResizeEvent
    110. 

  110.     resizeEvent.newWidth = this.webviewNode.clientWidth
    111. 

  111.     resizeEvent.newHeight = this.webviewNode.clientHeight
    112. 

  112.     this.dispatchEvent(resizeEvent)
    113. 

  113.   }
    114. 

  114. 

  115.   createGuest () {
    116. 

  116.     guestViewInternal.createGuest(this.buildParams()).then(guestInstanceId => {
    117. 

  117.       this.attachGuestInstance(guestInstanceId)
    118. 

  118.     })
    119. 

  119.   }
    120. 

  120. 

  121.   createGuestSync () {
    122. 

  122.     this.beforeFirstNavigation = false
    123. 

  123.     this.attachGuestInstance(guestViewInternal.createGuestSync(this.buildParams()))
    124. 

  124.   }
    125. 

  125. 

  126.   dispatchEvent (webViewEvent: Electron.Event) {
    127. 

  127.     this.webviewNode.dispatchEvent(webViewEvent)
    128. 

  128.   }
    129. 

  129. 

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

  131.   // an event handler.
    132. 

  132.   setupEventProperty (eventName: string) {
    133. 

  133.     const propertyName = `on${eventName.toLowerCase()}`
    134. 

  134.     return Object.defineProperty(this.webviewNode, propertyName, {
    135. 

  135.       get: () => {
    136. 

  136.         return this.on[propertyName]
    137. 

  137.       },
    138. 

  138.       set: (value) => {
    139. 

  139.         if (this.on[propertyName]) {
    140. 

  140.           this.webviewNode.removeEventListener(eventName, this.on[propertyName])
    141. 

  141.         }
    142. 

  142.         this.on[propertyName] = value
    143. 

  143.         if (value) {
    144. 

  144.           return this.webviewNode.addEventListener(eventName, value)
    145. 

  145.         }
    146. 

  146.       },
    147. 

  147.       enumerable: true
    148. 

  148.     })
    149. 

  149.   }
    150. 

  150. 

  151.   // Updates state upon loadcommit.
    152. 

  152.   onLoadCommit (webViewEvent: ElectronInternal.WebViewEvent) {
    153. 

  153.     const oldValue = this.webviewNode.getAttribute(WEB_VIEW_CONSTANTS.ATTRIBUTE_SRC)
    154. 

  154.     const newValue = webViewEvent.url
    155. 

  155.     if (webViewEvent.isMainFrame && (oldValue !== newValue)) {
    156. 

  156.       // Touching the src attribute triggers a navigation. To avoid
    157. 

  157.       // triggering a page reload on every guest-initiated navigation,
    158. 

  158.       // we do not handle this mutation.
    159. 

  159.       this.attributes[WEB_VIEW_CONSTANTS.ATTRIBUTE_SRC].setValueIgnoreMutation(newValue)
    160. 

  160.     }
    161. 

  161.   }
    162. 

  162. 

  163.   // Emits focus/blur events.
    164. 

  164.   onFocusChange () {
    165. 

  165.     const hasFocus = document.activeElement === this.webviewNode
    166. 

  166.     if (hasFocus !== this.hasFocus) {
    167. 

  167.       this.hasFocus = hasFocus
    168. 

  168.       this.dispatchEvent(new Event(hasFocus ? 'focus' : 'blur'))
    169. 

  169.     }
    170. 

  170.   }
    171. 

  171. 

  172.   onAttach (storagePartitionId: number) {
    173. 

  173.     return this.attributes[WEB_VIEW_CONSTANTS.ATTRIBUTE_PARTITION].setValue(storagePartitionId)
    174. 

  174.   }
    175. 

  175. 

  176.   buildParams () {
    177. 

  177.     const params: Record<string, any> = {
    178. 

  178.       instanceId: this.viewInstanceId,
    179. 

  179.       userAgentOverride: this.userAgentOverride
    180. 

  180.     }
    181. 

  181. 

  182.     for (const attributeName in this.attributes) {
    183. 

  183.       if (this.attributes.hasOwnProperty(attributeName)) {
    184. 

  184.         params[attributeName] = this.attributes[attributeName].getValue()
    185. 

  185.       }
    186. 

  186.     }
    187. 

  187. 

  188.     return params
    189. 

  189.   }
    190. 

  190. 

  191.   attachGuestInstance (guestInstanceId: number) {
    192. 

  192.     if (!this.elementAttached) {
    193. 

  193.       // The element could be detached before we got response from browser.
    194. 

  194.       return
    195. 

  195.     }
    196. 

  196.     this.internalInstanceId = getNextId()
    197. 

  197.     this.guestInstanceId = guestInstanceId
    198. 

  198. 

  199.     guestViewInternal.attachGuest(
    200. 

  200.       this.internalInstanceId,
    201. 

  201.       this.guestInstanceId,
    202. 

  202.       this.buildParams(),
    203. 

  203.       this.internalElement.contentWindow!
    204. 

  204.     )
    205. 

  205. 

  206.     // ResizeObserver is a browser global not recognized by "standard".
    207. 

  207.     /* globals ResizeObserver */
    208. 

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

  209.     // even documented.
    210. 

  210.     this.resizeObserver = new ResizeObserver(this.onElementResize.bind(this))
    211. 

  211.     this.resizeObserver.observe(this.internalElement)
    212. 

  212.   }
    213. 

  213. }
    214. 

  214. 

  215. export const setupAttributes = () => {
    216. 

  216.   require('@electron/internal/renderer/web-view/web-view-attributes')
    217. 

  217. }
    218. 

  218. 

  219. // I wish eslint wasn't so stupid, but it is
    220. 

  220. // eslint-disable-next-line
    221. 

  221. export const setupMethods = (WebViewElement: typeof ElectronInternal.WebViewElement) => {
    222. 

  222.   WebViewElement.prototype.getWebContentsId = function () {
    223. 

  223.     const internal = v8Util.getHiddenValue<WebViewImpl>(this, 'internal')
    224. 

  224.     if (!internal.guestInstanceId) {
    225. 

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

  226.     }
    227. 

  227.     return internal.guestInstanceId
    228. 

  228.   }
    229. 

  229. 

  230.   // WebContents associated with this webview.
    231. 

  231.   WebViewElement.prototype.getWebContents = function () {
    232. 

  232.     if (!remote) {
    233. 

  233.       throw new Error('getGuestWebContents requires remote, which is not enabled')
    234. 

  234.     }
    235. 

  235.     const internal = v8Util.getHiddenValue<WebViewImpl>(this, 'internal')
    236. 

  236.     if (!internal.guestInstanceId) {
    237. 

  237.       internal.createGuestSync()
    238. 

  238.     }
    239. 

  239. 

  240.     return (remote as Electron.RemoteInternal).getGuestWebContents(internal.guestInstanceId!)
    241. 

  241.   }
    242. 

  242. 

  243.   // Focusing the webview should move page focus to the underlying iframe.
    244. 

  244.   WebViewElement.prototype.focus = function () {
    245. 

  245.     this.contentWindow.focus()
    246. 

  246.   }
    247. 

  247. 

  248.   // Forward proto.foo* method calls to WebViewImpl.foo*.
    249. 

  249.   const createBlockHandler = function (method: string) {
    250. 

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

  251.       return ipcRendererUtils.invokeSync('ELECTRON_GUEST_VIEW_MANAGER_CALL', this.getWebContentsId(), method, args)
    252. 

  252.     }
    253. 

  253.   }
    254. 

  254. 

  255.   for (const method of syncMethods) {
    256. 

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

  257.   }
    258. 

  258. 

  259.   const createNonBlockHandler = function (method: string) {
    260. 

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

  261.       ipcRendererUtils.invoke('ELECTRON_GUEST_VIEW_MANAGER_CALL', this.getWebContentsId(), method, args)
    262. 

  262.     }
    263. 

  263.   }
    264. 

  264. 

  265.   for (const method of asyncCallbackMethods) {
    266. 

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

  267.   }
    268. 

  268. 

  269.   const createPromiseHandler = function (method: string) {
    270. 

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

  271.       return ipcRendererUtils.invoke('ELECTRON_GUEST_VIEW_MANAGER_CALL', this.getWebContentsId(), method, args)
    272. 

  272.     }
    273. 

  273.   }
    274. 

  274. 

  275.   for (const method of asyncPromiseMethods) {
    276. 

  276.     (WebViewElement.prototype as Record<string, any>)[method] = deprecate.promisify(createPromiseHandler(method))
    277. 

  277.   }
    278. 

  278. }
    279. 

  279. 

  280. export const webViewImplModule = {
    281. 

  281.   setupAttributes,
    282. 

  282.   setupMethods,
    283. 

  283.   guestViewInternal,
    284. 

  284.   webFrame,
    285. 

  285.   WebViewImpl
    286. 

  286. }
    287.