在页面内嵌入运行按钮

来源：互联网发布：影像中国软件编辑：程序博客网时间：2024/06/06 09:10

近来喜欢刷微博，看到winter-cn大大的更新了篇有关吐槽jquery文章，随点了进去，发现是在博客园写，随有读了另外几篇自己感兴趣的文章，期间发现博客园里也有运行嵌入在html里的代码，于是便产生了兴趣，自己也模范做了下，下面是代码，当然了，只是个简单的雏形。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><title>页面上实现运行网页按钮</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="" /><meta name="keywords" content="" /><script type="text/javascript"></script><style type="text/css">pre {    background: none repeat scroll 0 0 #F7FAFE;    border: 1px solid #ABCDF3;    color: silver;    line-height: 1em;}</style></head>    <body>        <div>        <button onclick="var w=window.open();w.document.write(this.nextElementSibling.innerText);"/>运行</button>        <pre>        <!doctype HTML>        <html>        <head>        <style type="text/css">        <strong style="color: black">            #green {                margin:10px 10px 10px 10px            }            #blue {                margin:10px 10px 10px 10px            }            #red {                margin:10px 10px 10px 10px            }        </strong>        </style>        </head>        <body>        <span style="color: black">        <div id="green" style="background:lightgreen;height:100px;width:100px;"></div>        <div id="blue" style="background:lightblue;height:100px;width:100px;"></div>        <div id="red" style="background:pink;height:100px;width:100px;"></div>        </span>        </body>        </html>        </pre>        </div>    </body></html>

先是在chrome下运行了下，可以实现效果，接着试了下ie，也行，但到了firefox下，却在新的页面上显示undefined，奇怪了，难道是js代码的不兼容么，于是细看了下js的实现代码，果然，innerText在firefox下不实现，于是换了下textContent，这下便好了，看来，博客园这个功能应该要改进下了。

var w=window.open();if(this.nextElementSibling.innerText) w.document.write(this.nextElementSibling.innerText); w.document.write(this.nextElementSibling.textContent);

朋友们，如何想要运行代码的话，不要直接复制上面的代码，要打开该页面的源码，复制pre标签直接的代码才可以复制。