蚊子
·
Electron 中使用 webview 中打开外部链接跳转问题
内容提要
在使用 Electron 34.x 版本时，遇到 webview 中 window.open() 无法正常工作的问题。尝试重写 window.open() 方法，但 iframe 中的 window.open() 仍无法拦截。考虑使用 WebContentView，但会影响其他元素的显示。最终方案是监控页面元素变化，动态显示或隐藏 WebContentView。
关键要点
-
在使用 Electron 34.x 版本时，webview 中的 window.open() 方法无法正常工作。
-
可以通过重写 window.open() 方法来解决问题，重写方式有两种：渲染层注入和主进程注入。
-
重写 window.open() 方法可以在 webview 中生效，但如果页面中有 iframe，iframe 中的 window.open() 不会被重写。
-
contents.setWindowOpenHandler() 方法无法拦截 iframe 中的 window.open() 行为。
-
将 webview 替换为 WebContentView 可以解决部分问题，但会影响其他元素的显示。
-
当前方案是监控页面元素变化，动态显示或隐藏 WebContentView，以确保弹窗和提示框正常显示。
延伸解读
重写 window.open() 的方法选择
在 Electron 中重写 window.open() 方法有两种方式：渲染层注入和主进程注入。渲染层注入适合于特定的 webview，而主进程注入则可以全局生效。选择合适的方法取决于项目需求和页面结构，尤其是是否存在 iframe。
iframe 的限制与解决方案
在使用 webview 时，iframe 中的 window.open() 方法无法被重写或拦截，这可能导致用户体验不佳。开发者需要考虑如何处理这些 iframe 中的链接，可能需要额外的逻辑来确保功能正常。
WebContentView 的使用考量
虽然将 webview 替换为 WebContentView 可以解决部分问题，但会影响页面其他元素的显示。开发者需权衡使用 WebContentView 的利弊，尤其是在涉及弹窗和提示框的情况下，可能需要额外的监控和处理逻辑。
延伸问答
在 Electron 34.x 中，webview 的 window.open() 方法为什么无法正常工作？
在 Electron 34.x 中，webview 的 window.open() 方法无法正常工作是因为它无法拦截 iframe 中的 window.open() 行为。
如何重写 Electron 中 webview 的 window.open() 方法？
可以通过渲染层注入或主进程注入的方式重写 window.open() 方法，以便在 webview 中生效。
使用 contents.setWindowOpenHandler() 方法有什么限制？
contents.setWindowOpenHandler() 方法无法拦截 iframe 中的 window.open() 行为，因此在这种情况下无效。
将 webview 替换为 WebContentView 有什么影响？
将 webview 替换为 WebContentView 可能会遮挡其他元素，导致弹窗和提示框无法正常显示。
目前解决 webview 中 window.open() 问题的方案是什么？
当前方案是监控页面元素变化，动态显示或隐藏 WebContentView，以确保弹窗和提示框正常显示。
在 Electron 中使用 webview 和 WebContentView 有哪些优缺点？
webview 和 WebContentView 各有优缺点，选择取决于具体的交互需求和显示效果。
