在博客园中在线运行html代码,关于在博客园文章中运行自己html

本文详细介绍了如何在博客中实现代码实时运行的功能。通过normalizeCode函数处理textarea中的特殊字符,然后利用newWin函数在新的窗口中运行代码。当用户点击运行按钮时,JavaScript监听事件获取并执行代码。这种方法适用于简单的单个代码运行,不适合处理多个代码块的运行场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

关于实现在博客网站中实时的运行自己的代码

Document

Document

运行

o_normalCode.png

要实现代码的运行必要的条件是取到代码,并运行,在textarea中的代码中的> 或< &等都被替换了

所以使用normalizeCode 函数可以是code取出后正常

var normalizeCode = function(code){

code = code.replace(/

code = code.replace(/>/g,‘>‘);

code = code.replace(/&/g,‘&‘);

return code;

};

接下来需要将取出的代码在空白的页面运行

newWin=function(code){

var newwin=window.open("","_blank");//新建一个窗口

newwin.document.open(‘text/html‘, ‘replace‘);//第二个参数只有一个值 可选:replace,如果启用了该值,则新建的文档会覆盖当前页面的文档(相当于清空了原文档里的所有元素,且不能后退即,浏览器的后退按钮不可用);

newwin.opener = null;

newwin.document.write(code);

newwin.document.close();

}

接下来是什么点击什么触发这段代码,在上面的例子中是通过textare中的id 和button 的id达到快速找到要运行的文本和点击运行的按钮打开窗口

window.οnlοad=function(){

document.getElementById("run").οnclick=function(){

var code=document.getElementById("runcode").innerHTML;

code=normalizeCode(code);

newWin(code);

}

}

这个方法比较简单,不适用一个窗口中含有多个运行的html

//2016/8/27

//过两天更新

原文:http://www.cnblogs.com/heyinwangchuan/p/5813042.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值