在页面内嵌入运行按钮

最新推荐文章于 2023-06-16 16:34:39 发布

molaifeng

最新推荐文章于 2023-06-16 16:34:39 发布

阅读量697

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/molaifeng/article/details/8597028

版权

Javascript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

近来喜欢刷微博，看到 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 οnclick="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标签直接的代码才可以复制。