用 js 实现 HTML 代码运行框

下面函数是在别的网站上看到的,自己查找资料学习。

运行框函数:

function runCode(obj) {
     var winname = window.open('', "_blank", '');
     winname.document.open('text/html', 'replace');       //可省略,后面的write() 之前会默认执行
     winname.opener = null                                // 防止代码对论谈页面修改,opener代表父窗口,设置为null后将不能对父窗口进行操作
     winname.document.write(obj.value);
     winname.document.close();                            //close() 是必须的
}


复制代码(只在ie下有效)

function copyCode(obj) {
  var rng = document.body.createTextRange();
  rng.moveToElementText(obj);
  rng.scrollIntoView();
  rng.select();
  rng.execCommand("Copy");
  rng.collapse(false);
}



转载于:https://www.cnblogs.com/hdchangchang/archive/2013/01/05/3965382.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML代码运行插件通常指的是那些允许用户在网页上直接预览、编辑以及执行HTML、CSS、JavaScript等前端语言代码,并实时看到结果的在线工具或浏览器扩展程序。这类插件可以帮助开发者快速验证代码片段的功能,无需在本地环境中进行复杂的设置。 ### HTML代码运行插件的特点: 1. **实时预览**:当开发者更改代码后,不需要刷新页面就能立即查看到修改的效果,提高了开发效率。 2. **跨平台兼容性**:支持各种操作系统和设备,可以在多种环境下运行。 3. **代码高亮**:对输入的代码进行语法高亮显示,帮助识别语法错误和提高代码可读性。 4. **集成调试功能**:部分插件还提供基本的调试工具,如断点、单步执行等功能,方便测试代码逻辑。 5. **社区资源丰富**:许多插件拥有活跃的用户社区,可以获取教程、示例代码和解决技术问题。 ### 实现方式: HTML代码运行插件通常基于现代Web技术构建,比如使用了HTML5、CSS3、JavaScript以及一些库(如jQuery、React、Vue.js等),结合架(如AngularJS)来实现动态内容生成和交互处理。它们可能会采用Ajax异步请求技术从服务器拉取代码执行的结果返回给客户端展示。 ### 使用场景: 1. **学习环境**:对于初学者来说,在线代码执行环境是一种非常有效的学习工具,可以即时反馈编码错误和正确操作带来的效果。 2. **项目协作**:团队成员可以在共享的在线平台上编写并分享代码片段,便于实时讨论和合作。 3. **原型设计**:在项目初期阶段,快速迭代和验证设计方案非常重要,代码运行插件可以提供这一便利。 ### 示例插件: - **CodePen**:一个广受欢迎的开源平台,用户可以创建、分享和嵌入HTML/CSS/JavaScript代码片段。 - **JSFiddle**:另一个强大的在线代码实验平台,不仅支持上述三种语言,还内置了多种版本的JavaScript引擎。 - **REPL.it**:一个全栈式代码运行平台,支持多种编程语言,包括但不限于Python、JavaScript、Ruby等,适合于各类项目的开发需求。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值