svelte：嵌入式 github 要点抛出无法在 'Document' 上执行 'write'

Question

我找不到在本地 svelte 应用程序中嵌入 github 要点 的方法。

无论我做什么，客户端控制台都会向我抛出一个 Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. 错误或根本不显示任何内容。

这可能是显而易见的，但似乎 github 嵌入式要点在加载文档时使用 document.write 在脚本位置创建要点元素

This issue on svelte repo 似乎有关系，但只谈svelte网站的demo REPL...

到目前为止我尝试了什么：

只需将 github 给出的 script 标签嵌入我的 page.svelte -> 以上错误
将其嵌入模板 index.html 进行测试 -> 这有效，但显然您在任何页面的顶部都有要点...
使用以下代码创建一个 Gist.svelte 组件 -> 以上错误

<!-- Gist.svelte -->
<script>
  export let gistUrl = ""

  import { onMount } from 'svelte'

  let container;

  onMount(() => {
    const child = document.createElement('script')
    child.src = gistUrl + ".js"
    //child.defer = true
    container.appendChild(child)
  })
</script>

<div bind:this={container}/>

<!-- page.svelte -->
<!-- ... -->
  <Gist gistUrl="the_gist_url"/>
<!-- ... -->

PS : 在询问 Whosebug 之前，我不敢打开一个关于这个的新问题。

Answer 1

您可以通过在 <iframe>:

中渲染 Gist 来解决这个问题

<!-- Gist.svelte -->
<script>
  export let gistUrl = ""

  import { onMount } from 'svelte'

  let frame;
  onMount(() => {
    frame.srcdoc = `<script src='${gistUrl}.js'><${""}/script>`;
  });
</script>
<style>
  iframe {
    border: 0;
    width: 100%;
    height: 100%;
  }
</style>
<iframe src="about:blank" bind:this={frame} title="Gist"></iframe>

Try it in the REPL

Answer 2

这个问题不是 svelte 特有的。在文档（由 svelte 创建）完全解析并关闭后，异步加载的脚本（如嵌入式 github 要点）将运行。这就是将标签放在 index.html 中的原因（因为文档仍处于打开状态）。有关详细信息，请查看此 Whosebug question

svelte：嵌入式 github 要点抛出无法在 'Document' 上执行 'write'

svelte : embedded github gist throws Failed to execute 'write' on 'Document'

svelte

svelte-3

gist