保持在线html编辑器原始html内容不变的巧妙方法
本文介绍如何优化在线HTML、CSS、JavaScript编辑器，防止JavaScript代码修改HTML编辑区域的原始内容。 现有代码直接修改HTML区域内容，导致原始代码丢失。 我们需要让JavaScript代码仅影响iframe内容，而原始HTML代码保持不变。
目前，代码使用srcdoc属性将HTML、CSS和JavaScript注入iframe。然而，直接操作document.getElementById("html").value会改变原始HTML文本区域。 解决方法是将HTML、CSS和JavaScript代码组合成完整的HTML文档，再通过src属性加载到iframe，而非使用srcdoc。 关键在于利用data:协议生成完整的HTML字符串，作为iframe的src属性值。 这样，iframe内容与HTML编辑区域内容完全隔离。
改进后的JavaScript代码如下：
var ele = document.getElementById("button");ele.addEventListener("click", function(){ var obHtml = document.getElementById("html").value; var obCss = document.getElementById("css").value; var obJs = document.getElementById("js").value; var obIframe = document.getElementById("iframe"); var wholeContent = `data:text/html,__CSS____HTML____JS__` .replace('__CSS__', obCss) .replace('__HTML__', obHtml) .replace('__JS__', obJs); obIframe.src = wholeContent;});
此代码构建完整的HTML字符串，包含用户输入的HTML、CSS和JavaScript代码。data:协议生成的URL创建一个独立的HTML文档，加载到iframe中。 iframe内容更新，但原始HTML文本区域内容保持不变，达到预期效果。 这利用了data:协议与其他协议（如http或file）的隔离性，避免直接修改原始HTML文本区域。
立即学习“Java免费学习笔记（深入）”；
以上就是如何防止在线HTML编辑器中的JavaScript代码修改原始HTML内容？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1563713.html
微信扫一扫 
支付宝扫一扫 
