使用 Javascript 查找和替换 HTML iframe “srcdoc”属性中的文本

Question

tldr：我希望将其他文本单独保留在 iframe 的 srcdoc 属性中，但仅使用 vanilla Javascript 交换样式表的链接。

更长的版本：

我正在自定义一个Publii博客模板，并使用他们托管的JS SDK嵌入一个Cusdis评论小部件。

Publii 使用 HTML、CSS、Javascript 和 Handlebars。

Cusdis 小部件通过将以下代码粘贴到您的 html 文档中来工作：

<div id="cusdis_thread"
  data-host="https://cusdis.com"
  data-app-id="{{ APP_ID }}"
  data-page-id="{{ PAGE_ID }}"
  data-page-url="{{ PAGE_URL }}"
  data-page-title="{{ PAGE_TITLE }}"
>
<script async src="https://cusdis.com/js/cusdis.es.js"></script>

然后，Cusdis SDK 将找到 ID 为cusdis_thread的元素，然后在其上挂载 iframe 小部件：

<iframe srcdoc='<!DOCTYPE html>
 <html>
  <head>
    <link rel="stylesheet" href="https://cusdis.com/js/style.css">
    <base target="_parent" />
    <link>
    <script>
      window.CUSDIS_LOCALE = undefined
      window.__DATA__ = {"host":"https://cusdis.com","appId":"...","pageId":"...","pageUrl":"...","pageTitle":"..."}
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cusdis.com/js/iframe.umd.js" type="module"
    </script>
  </body>
 </html>'
style="width: 100%; border: 0px none; height: 323px;">
  #document
</iframe>

我的问题如下：

我想编辑 Cusdis 小部件的 CSS，以便我的网站看起来更好。
我试过编辑我自己的样式表并选择 Cusdis 的 CSS 类，但是更改没有反映在 output 中（即使有。重要的），我怀疑这是因为小部件生成了 iframe。我想编辑的元素是包含在 iframe 中。
解决方法似乎是用指向另一个外部样式表的链接替换 iframe 的“srcdoc”属性中的样式表

因为 iframe 是 Cusdis 的 SDK 自动生成的，所以我这边无法编辑那个 HTML。 我正在尝试找到一种方法来使用vanilla Javascript替换生成的 iframe 的 srcdoc 中的样式表。

这是我试过的：

使用 setAttribute 替换属性的内容：

document.querySelector("#cusdis_thread iframe").setAttribute('srcdoc', '<!DOCTYPE html><html><head><link rel="stylesheet" href="..."><base target="_parent" /><link><script> window.CUSDIS_LOCALE = undefined window.__DATA__ = {"host":"https://cusdis.com", appId":"...","pageId":"{{id}}","pageUrl":"{{url}}","pageTitle":"{{title}}"} </script> </head> <body> <div id="root"></div> <script src="https://cusdis.com/js/iframe.umd.js" type="module"> </script></body></html>');

结果：理论上可行，但评论区没有生成。 当我检查代码时，属性的内容被替换了。 但是，我使用把手表达式 {{}} 动态添加 PAGE_ID、PAGE_URL 和 PAGE_TITLE，但这些表达式保存在 srcdoc 中（因此，而不是 iframe 在window.__DATA__ =...部分，它仍然显示车把表达式 {{url}}）。

所以，我正在寻找一种解决方案，它将其他文本单独保留在 srcdoc 属性中，但只交换到 stylesheet 的链接。 这是我的尝试：

使用.replace 找到 Cusdis 样式表的 url 并将其替换为我自己的：

document.querySelector("#cusdis_thread iframe").replace("https://cusdis.com/js/style.css", "...");

结果：被忽略

仅对样式表使用 setAttribute：

document.querySelector("#cusdis_thread iframe").setAttribute('srcdoc', '<link rel="stylesheet" href="...">');

结果：被忽略

Answer 1

由于此 iframe 是通过其srcdoc属性加载的，因此您可以从您自己的文档访问其内部文档（因为about:srcdoc很神奇）。

所以最好的办法是等待 iframe 加载，并在其中注入您自己的<link> （或根据需要修改样式表）。

const iframe = document.querySelector("iframe");
iframe.addEventListener("load", (evt) => {
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = "your-stylesheet.css";
  iframe.contentDocument.head.append(link);
}, { once: true });

现场演示（作为 jsfiddle 因为 StackSnippets null - 起源的 iframe 对同源是黑暗魔法......

复杂的部分可能是检测何时将此 iframe 插入到文档中。 看起来您已经能够这样做，但对于那些不能这样做的人，他们可以检查库从哪个事件触发，或者在最坏的情况下，使用MutationObserver 。

使用 Javascript 查找和替换 HTML iframe “srcdoc”属性中的文本

问题描述

1 个解决方案

解决方案1
1 2021-08-20 02:35:08

使用 Javascript 查找和替换 HTML iframe “srcdoc”属性中的文本

问题描述

1 个解决方案

解决方案1 1 2021-08-20 02:35:08

解决方案1
1 2021-08-20 02:35:08