芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
4

用 JavaScript 实现 HTML 代码运行框

作者 芒果/分类 代码/发布于 2009-05-26 11:42

在网页中直接运行代码并不困难,只需简单的 JavaScript 和 HTML 相结合即可实现。

首先,在网页中插入以下 JavaScript 代码:

<script type="text/javascript">
function Preview()
{
  var TestWin=open('');
  TestWin.document.write(code.value);
}
</script>

此处使用 Preview 函数来打开新窗口并执行代码。接下来需要构造一个代码框:

<textarea id=code cols=50 rows=10></textarea>
<button onclick=Preview() >运行代码</button>

此处对 textarea 设定 id=code 以向 JavaScript 传值。<button> 标签的 onclick 事件则调用了 Preview 函数。

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/use-javascript-achieve-html-code-run-frame/" title="用 JavaScript 实现 HTML 代码运行框" rel="bookmark">用 JavaScript 实现 HTML 代码运行框 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 4 条群众意见

  1. 老妖 /2011-03-14 11:52

    IE可以。火狐就不行哦。有没有兼容多个浏览器的办法? 回应

    #1
  2. ?
    用 JavaScript 实现 HTML 代码运行框 | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广 /2011-05-03 23:05

    […] 转载至:用 JavaScript 实现 HTML 代码运行框 | 芒果小站 分类: css, 其它 标签: 临时 5 个简单实用的 CSS 属性纯 CSS 实现文本渐变效果CSS 的外联,内联和嵌入芒果教你清除浮动CSS 有序列表 ol 和无序列表 ul你真的认识 window.location 吗?使用 <hr> 标签创建水平分隔线用 CSS 实现段落首行缩进YUI 2: Event Utility多层元素嵌套的圆角按钮 评论 (0) Trackbacks (0) 发表评论 Trackback […] 回应

    #2
  3. changchang /2013-01-05 11:18

    Preview() 中是不是应该添加 :TestWin.document.close(); ?

    在这里学了很多东西,谢谢芒果 回应

    #3
  4. ?
    怎麽在WP中在加入DZ那眼的代码运行框 - WordPress - 开发者 /2013-06-19 01:48

    […] 難道真的沒人知道嗎  求教 回复: http://mangguo.org/use-javas … tml-code-run-frame/ 回复: 难道以后每次发帖都要加入这样的代码框吗 […] 回应

    #4

下面我简单说几句