svelte - svelte：嵌入式 github gist 抛出 Failed to execute 'write' on 'Document'

Question

我找不到将github gist嵌入到我的本地 svelte 应用程序中的方法。

无论我做什么，客户端控制台都会给我一个 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 嵌入式 gists 使用document.write在加载文档时在脚本位置创建 gist 元素

svelte repo 上的这个 issue 似乎是相关的，但只讨论了 svelte 网站的演示 REPL...

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

• 只需将scriptgithub 给出的标签嵌入我的 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：在询问 stackoverflow 之前，我不敢就此提出新问题。

标签： sveltesvelte-3gist

Answer 1

您可以通过在以下内容中呈现 Gist 来解决此问题<iframe>：

<!-- 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>

在 REPL 中尝试