怎么添加html运行框_添加html运行框方法【设置】-html教程-PHP中文网

怎么添加html运行框_添加html运行框方法【设置】

蓮花仙者

发布： 2025-12-08 11:14:02

原创

192人浏览过

使用textarea和iframe创建代码编辑区与预览区，通过JavaScript将用户输入的HTML代码写入iframe实现实时预览；2. 可扩展为HTML、CSS、JS三栏编辑，拼接后注入iframe；3. 添加sandbox属性提升安全性，结合localStorage保存代码，注意文档写入时机与跨域限制。

怎么添加html运行框_添加html运行框方法【设置】

要在网页中添加一个可以运行 HTML 的代码框，通常用于教学、演示或开发测试，可以通过以下方法实现。这种“运行框”让用户输入 HTML、CSS 或 JavaScript 代码，并能实时预览效果。

使用 iframe 实现 HTML 运行框

最简单的方式是利用 iframe 创建一个可动态更新的预览区域。

基本思路：用两个区域，一个是代码编辑区（textarea 或 contenteditable），另一个是显示运行结果的 iframe。

示例代码：

<!-- 编辑区 --><br/><textarea id="htmlCode" rows="10" cols="50"><h1>Hello World</h1><p>这是一个测试</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2408">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/176412720074643.png" alt="简小派">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2408">简小派</a>
                            <p>简小派是一款AI原生求职工具，通过简历优化、岗位匹配、项目生成、模拟面试与智能投递，全链路提升求职成功率，帮助普通人更快拿到更好的 offer。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="简小派">
                                <span>103</span>
                            </div>
                        </div>
                        <a href="/ai/2408" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="简小派">
                        </a>
                    </div>
                </textarea><br/><br><br/><button onclick="runHTML()">运行代码</button><br/><br><br/><!-- 显示运行结果 --><br/><iframe id="previewFrame" width="100%" height="300"></iframe><br/><br/><script><br/>function runHTML() {<br/>  const code = document.getElementById('htmlCode').value;<br/>  const iframe = document.getElementById('previewFrame');<br/>  const iframeDoc = iframe.contentDocument;<br/>  iframeDoc.open();<br/>  iframeDoc.write(code);<br/>  iframeDoc.close();<br/>}<br/></script>

登录后复制