web应用程序如何在弹出窗口中显示静态资产

Question

我是网络开发的新手，我正试图在我的电脑上制作一个个人使用的网络应用程序，在弹出窗口中播放视频。它需要是一个弹出窗口，这样我就可以把主窗口放在一个屏幕上，把视频放在另一个屏幕。该视频存储在本地。我已经学会了用视频播放器打开弹出窗口的基本原理，但视频不会加载到弹出窗口中。

我正在使用Svelte，但我认为这是巧合，这是所提供的应用程序的结果——弹出窗口无法访问主窗口的资产。这是从一个简单的Svelte套件项目开始的：

<!-- src/routes/index.svelte -->
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<img src="favicon.png" alt="displays fine in main window"/>
<div>
<script>
var popup = window.open('', "popup", "width=200,height=100");
popup.onload = () => {
popup.document.body.innerHTML = `<img src="favicon.png" alt="doesn't display in popup">`
}
</script>
</div>

Answer 1

当然，在SO上问这个问题让我找到了答案。。。所以，是的，我的问题是打开一个没有地址的弹出窗口——因此在应用程序之外，无法访问其资源。我所要做的就是把视频播放器(为了简单起见，在这个例子中只是加载一个图像(放在一个单独的路径中，并用window.open('/vidplayer')打开弹出窗口。

routes/index.svelte:

<script>
var popup = window.open('/vidplayer', "popup", "width=200,height=100");
popup.onload = () => {
popup.document.body.innerHTML = `<img src="favicon.png" alt="doesn't display in popup">`
}
</script>
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<img src="favicon.png" alt="displays fine in main window"/>

routes/vidplayer.svelte:

<h1>Welcome to the video player</h1>
<img src="favicon.png" alt="now displays in popup!"/>

但我曾尝试使用系统上的绝对路径加载资产。为什么不起作用？我想是因为浏览器除了提供本地文件外，无法访问本地系统上的文件吗？例如，我尝试直接从本地index.html文件打开一个窗口(popup.html((而不是为web应用程序提供服务(，然后加载了资源。