Question

我正在使用iframe作为编辑器构建文本编辑器。

我正在处理一个菜单项，当单击它时，允许用户编写一段代码，然后使用Prism语法高亮显示器设置样式，并在iframe中添加其余的文本内容。< / p>

构建普通网页时，包含在pre和code标签中的所有代码都会立即显示为：

我的问题是我无法找到一种方法让Prism语法高亮显示在我的文本编辑器iframe中工作（对于任何语法高亮显示器都会遇到同样的问题）。

prism.css文件在iframe内部工作，但prism.js文件没有。我知道这个，因为当函数运行时，javascript文件没有处理输出，javascript文件添加了使用css文件更改颜色所需的类：

此图显示单击菜单项时发生的情况。 html被插入到iframe中，但没有任何样式。然后，当您按下预览按钮以查看博客文章的样子时，代码块文本没有应用任何样式，因为prism.js未在iframe内运行。

我尝试将脚本包含在iframe本身的head标签中，并带有一个＆＃34; allow-scripts＆＃34;和＆＃34;允许跨越起源＆＃34;，但那不起作用。

我真的很感激这个想法或解决方案。

这是我的代码：

HTML：

JavaScript（＆＃34时调用的函数;＆＃34;单击菜单项）：

Answer 1

iframe 仅外部网络来源的加载程序 - 来自其他网站的内容，或来自外部网站的整个页面。出于安全原因，禁用了操纵iframe内容的功能，以防止XSS和网络钓鱼攻击。

iframe 不是您自己网页中元素或内容的容器。放置在iframe中的内容将被浏览器忽略。

<iframe>This is my content</iframe>

iframe需要从中加载来源。

<iframe src="https://www.wikipedia.com/"></iframe>

没有理由将iframe用作您自己内容的容器。如果您只是将iframe用作编辑器的容器，那么几乎任何其他HTML标记都可以正常工作。将<iframe>切换为<div>，您将拥有一个正常工作的编辑器。

Answer 2

想出我出错的地方，prism.js文件在页面加载时运行，并且一旦新内容添加到页面后就不再运行。在将代码块添加到页面后，通过将src链接添加到脚本标记来解决此问题。