使用 Svelte 访问 iframe 内容

Question

我正在尝试访问 iframe 中的 head 元素以更改样式。但是我能想到的一切都不行。
这是我当前的代码：

<script>
  let frame;
  onMount(() => {
    frame.addEventListener('load', onLoad());
  })
  function onLoad() {
    let head = frame.contentDocument.head || frame.contentWindow.document.head;
    console.log(head);
  }
</script>

<iframe bind:this={frame} src="src_here" title="preview" />

这将成功记录 iframe，但 innerHTML 为空。

Answer 1

我认为您不能很好地访问 head 元素。

尝试这样的事情：

function onLoad() {
    const head = frame.contentDocument.querySelector('head');
    console.log(head);
}

使用 Svelte 访问 iframe 内容

Access iframe content with Svelte

iframe

styling

head

svelte