创建带有附加的苗条组件并在相同的 Javascript 上下文中的窗口

Question

我使用Sapper框架，我想打开我自己的开发工具窗口，该窗口应该可以完全访问主窗口的Javascript对象。

我正在尝试创建一个具有苗条组件和相同 Javascript 上下文的新窗口：

var win = window.open('abour:blank')
var container = win.document.createElement('div')
var win.document.body.appendChild(container)
var component = new ComponentClass({
target: container,
})

它可以工作，但没有CSS样式。

您可以使用此 REPL 进行测试。

如何为新窗口应用组件 CSS 样式？

或者创建此类窗口的最佳实践是什么？

Answer 1

我通过简单地从父窗口传输所有样式来解决这个问题(请参阅appendCss函数(

如果使用工兵，则只能传输以下样式：link[rel="stylesheet"][href^="client/"]

完整的解决方案在下面，你也可以看到这个REPL

ComponentWindow.ts

export class ComponentWindow {
constructor({
windowName = '',
windowFeatures = 'width=600,height=400,resizable,scrollbars=yes,status=1',
replace = false,
}: {
windowName?: string,
windowFeatures?: string,
replace?: boolean,
} = {}) {
this._windowOptions = [ 'about:blank', windowName, windowFeatures, replace ]
}
// region create window
private readonly _windowOptions: any[]
private _window
public get window() {
if (!this.isOpened) {
this._window = window.open(...this._windowOptions)
this.appendCss()
this.appendContainer()
}
return this._window
}
private appendCss() {
const {window: _window} = this
const parentStyleElements = Array.from(window.document.querySelectorAll(
'link[rel="stylesheet"][href^="client/"], style',
))
for (let i = 0; i < parentStyleElements.length; i++) {
const parentStyleElement = parentStyleElements[i]
let styleElement
switch (parentStyleElement.tagName) {
case 'LINK':
styleElement = _window.document.createElement('link')
styleElement.rel = 'stylesheet'
styleElement.href = (parentStyleElement as any).href
break
case 'STYLE':
styleElement = _window.document.createElement('style')
styleElement.id = parentStyleElement.id
styleElement.innerHTML = parentStyleElement.innerHTML
break
default:
throw new Error('Unexpected style element: ' + styleElement.tagName)
}
_window.document.head.appendChild(styleElement)
}
}
private appendContainer() {
const {window} = this
window.container = window.document.createElement('div')
window.document.body.appendChild(window.container)
}
// endregion
// region attachComponent
private _component
public attachComponent(componentClass?, options?) {
let {_component} = this
if (_component) {
_component.$destroy()
this._component = _component = null
}
if (!componentClass) {
return
}
const {window} = this
_component = new componentClass({
...options,
target: window.container,
})
this._component = _component
window.addEventListener('beforeunload', () => {
this.attachComponent()
})
return _component
}
// endregion
public get isOpened() {
return this._window && !this._window.closed
}
public focus() {
if (this.isOpened) {
this._window.focus()
}
}
public destroy() {
this.attachComponent()
if (this.isOpened) {
this._window.close()
this._window = null
}
}
}

用法：

<script>
import {ComponentWindow} from './ComponentWindow.js'
import ComponentClass from './ComponentClass.svelte'
import {onMount, onDestroy} from 'svelte'
let componentWindow = new ComponentWindow()
let component
let value = 10
onDestroy(() => componentWindow.destroy())
$: if (component) component.$set({ value })
async function openComponentWindow() {
if (componentWindow.isOpened) {
componentWindow.focus()
return
}
component = await componentWindow.attachComponent(ComponentClass, {
props: {
value               
}
})
componentWindow.focus()
}
</script>
<button on:click="{openComponentWindow}">Open component Window</button><br>
<button on:click="{() => value++}">Change value</button>