Javascript 允许在文本区域（或类似区域）内编辑iframe的HTML和CSS的实时编辑器

好的，作为前言，我不是一个经验丰富的程序员。我的领域主要是HTML和CSS，所以我有点困在这里，我在网上到处搜索，找不到我需要的东西；我不确定这是我的措辞不当还是缺乏信息，哈哈

HTML 自由编辑 完整风格 发电机

JQUERY @进口urlhttps://fonts.googleapis.com/css?family=Open+Sans； ：：选择{背景：EAA2B9；} ：-moz选择{背景：EAA2B9；} 正文，html{高度：100%；} 正文{页边距：0；} 输入，显示{显示：内联块；高度：100%；垂直对齐：顶部；溢出：隐藏；} 输入{位置：相对；背景：dddurlhttp://i.imgur.com/wBSwx5F.jpgcenter 无重复固定；宽度：35%；-webkit框阴影：插入-10px 0 10px-10px rgba0,0,0.6；框阴影：插入-10px 0 10px-10px rgba0,0,0.6；} 控件{字体系列：开放式SAN、Helvetica、arial、无衬线；字体大小：13px；文本对齐：右；高度：24px；背景：fff；填充：7px；边框底部：1px实心ccc；-webkit方框阴影：inset-10px 0 10px-10px rgba0,0,0.6；方框阴影：inset-10px 0 10px 0 10px rgba0,0,0.6；} .c按钮，选择，选项{背景：fff；光标：指针；边框：1px实心rgba0,0,0.3；边框半径：4px；填充：2px 10px；边距：0 2px；字体系列：开放式SAN、Helvetica、arial、无衬线；} 输入内部{位置：绝对；底部：4px；顶部：38px；宽度：97%；边距：0；背景：透明；边框：无；填充：10px；颜色：000；溢出：自动；} 输入：焦点，文本区域：焦点，选择：焦点，选项：焦点{大纲：无；} 显示{宽度：65%；} 显示内部{高度：100%；溢出：自动；边框：无；宽度：100%；} 显示内部p{最大宽度：600px；显示：块；边距：0自动；填充：100px；文本对齐：对齐；字体系列：开放式SAN、Helvetica、arial、无衬线；线宽：150%；字体大小：115%；颜色：444；} 选项： 自由编辑 完整风格 发电机 拯救

---

这将是一个很长的答案，如果我要涵盖所有需要发生的事情，让它以你需要的方式工作，所以我会给你一些有用的提示

您可以通过document.getElementById'MY\u iFrame\u ID'.contentWindow.document从主页访问iFrame的文档 和属性将是您检索和更新页面代码的最佳朋友。 要显示HTML，可以执行以下操作：iframeDocument.getElementsByTagName'HTML'[0].outerHTML，这将包含整个页面的HTML，包括所有内联css/js。如果还需要doctype，请阅读。将所有内容插入文本区域。 要进行更新，您可以从textarea中获取html并将其与Element.innerHTML一起插入，类似于：iframeDocument.getElementsByTagName'html'[0]。innerHTML=htmlFromTextarea 对于外部css/js，您将需要一种适当的方式来显示代码，但我将让您来了解其中的细节。 要获得外部css，您只需迭代iframeDocument.styleSheets，并使用与上面提到的策略类似的策略，尽管您可能需要记住这一点。 对于外部js，您可以以类似的方式找到它们。迭代iframeDocument.getElementsByTagName'script'并使用Element.innerHTML获取其内容 您可以实现每次只更新部分而不是整个文档的策略，但这需要更多的参与。我建议您采用更新整个文档的路线，直到您更好地了解移动部件。 语法高亮显示非常有用，所以请考虑将代码放在代码编辑器中。

---

我希望这对你有帮助，祝你好运！如果您觉得这个答案解决了您的问题，请不要忘记检查答案是否正确。

在您的方法中，html、css和javascript都应该内联吗？如果没有，您计划如何显示外部css/js？在这里和你打算去哪里之间似乎有很多模棱两可的地方。请描述这个基本代码应该由什么组成。@marcbraulio这是我最大的问题。我已经找到了我想要实现并完成的大多数功能的明确答案，但是关于如何将iframe显示的内容连接到代码编辑功能，以便它们协同工作，而不是删除iframe内容并在开始编辑后重新开始，这是我遇到的障碍。我不确定我需要研究什么样的编程来处理这个过程。所以我想我需要的是一个起始块，一个指向函数信息的链接，或者一个代码示例。非常感谢您为我指明了正确的方向。我想有了这些，我就有希望走上正确的轨道，自己完成这项工作，了解我所缺少的元素将真正有助于在网上搜索关于每一个元素的更多信息。语法突出显示肯定是我想要实现的，所以也感谢您提到这一点！再次感谢你帮我向g解释我需要研究的部分 让这一切正常运作。 $(function() { function change() { var iFrame = document.getElementById('display-inner'); var iFrameBody; if ( iFrame.contentDocument ) { // FF iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0]; } else if ( iFrame.contentWindow ) { // IE iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0]; } iFrameBody.innerHTML = document.getElementById('input-inner').value; } });