如何在网站内 运行 JS 代码

最新推荐文章于 2024-05-10 01:51:53 发布
最新推荐文章于 2024-05-10 01:51:53 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： Jquery/Javascript 文章标签： function table button class border div

在网站中实现这样的结果，其实很简单，博客园里就有这样的模式，分析代码，发现实现的功能并不难的，

把js内容放进一个 textarea 标签内，

<textarea rows="10" style="width:75%" id="runcode5"> 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <title> CSS垂直居中</title>
    <style type="text/css">
      div {
        display:table-cell;
        vertical-align:middle;
        text-align:center;
        width:500px;
        height:500px;
        background:#B9D6FF;
        border: 1px solid #CCC;
      }

    </style>
    <!--[if IE]>
<style type="text/css">
i {
	display:inline-block;
	height:100%;
	vertical-align:middle
	}
img {
	vertical-align:middle
	}
</style>
<![endif]-->
   
  </head>
  <body>
    <h1>垂直居中(display:inline-block法)</h1>
    <div class="container">
      <i></i>
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
    </div>
  </body>
</html>
</textarea>
<p><button title="runcode5" class="runcode" type="button">运行代码</button></p>


 

JS代码：

var guarder = function(mercy){
    mercy = mercy || true;
    var unselect = function(){
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    };
    if(mercy){
        document.onselectstart=unselect;
        document.οncοpy=unselect;
        document.onbeforecopy=unselect;
        document.οnmοuseup=unselect;
        document.οnselect=unselect;
        document.οnpaste=unselect;       
    };
}
var getElementsByClassName = function (searchClass, node,tag) {
    if(document.getElementsByClassName){
        return  document.getElementsByClassName(searchClass);
    }else{
        node = node || document;
        tag = tag || "*";
        var classes = searchClass.split(" "),
        elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
        patterns = [],
        returnElements = [],
        current,
        match;
        var i = classes.length;
        while(--i >= 0){
            patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
        }
        var j = elements.length;
        while(--j >= 0){
            current = elements[j];
            match = false;
            for(var k=0, kl=patterns.length; k<kl; k++){
                match = patterns[k].test(current.className);
                if (!match) break; 
            }
            if (match)  returnElements.push(current);
        }
        return returnElements;
    }
}

var loadEvent = function(fn) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = fn;
    }else {
        window.onload = function() {
            oldonload();
            fn();
        }
    }
}

var normalizeCode = function(code){
    code = code.replace(/</g,'<');
    code = code.replace(/>/g,'>');
    code = code.replace(/&/g,'&');
    return code;
};

var runCode = function(code){
    if (code!=""){
        var newwin = window.open('', "_blank", '');
        newwin.document.open('text/html', 'replace');
        newwin.opener = null;
        newwin.document.write(code);
        newwin.document.close();
    }    
};

var evalCode = function(code){
    var head = document.getElementsByTagName("head")[0],
    js = document.createElement("script");
    js.type = "text/javascript";
    js.charset= "utf-8";
    js.text = code;
    head.insertBefore(js, head.firstChild);
    head.removeChild(js);
};

var runCodes = function(){
    document.onclick = function(e){        
        e = e || window.event;
        var target = e.srcElement ? e.srcElement : e.target,
        tag = target.nodeName.toLowerCase();
        if((tag == "button") && hasClass(target,"runcode")){
            var id = target.getAttribute("title"),
            code = document.getElementById(id).innerHTML;
            code = normalizeCode(code);
            hasClass(target,"direct") ? evalCode(code):runCode(code);
        }
    }
};

var hasClass = function(ele,cls) {
    return -1 < (" "+ele.className+" ").indexOf(" "+cls+" ");
};
var addClass = function(ele,cls) {
    if (!this.hasClass(ele,cls)) ele.className += " "+cls;
};
var removeClass = function(ele,cls) {
    if (hasClass(ele,cls)) {
        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        ele.className=ele.className.replace(reg,' ');
    }
};
var addEvent = (function () {
    if (document.addEventListener) {
        return function (el, type, fn) {
            el.addEventListener(type, fn, false);
        };
    } else {
        return function (el, type, fn) {
            el.attachEvent('on' + type, function () {
                return fn.call(el, window.event);
            });
        };
    };
})();
var tableManager = function(){
    var tables = getElementsByClassName("filament_table",document,"table");
    if(tables.length > 0){
        for(var i=0,l= tables.length;i<l;i++){
            var table = tables[i],
            rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr"),
            j = rows.length;
            while(--j > 0){
                if(!+"\v1" && j%2 == 1){
                    addClass(rows[j],"even");
                };
            };
            with(table){
                cellSpacing= "0";
                width = table.getAttribute("width") || "700";
                rules = "cols"
                };
            addEvent(table,'mouseover',function(){
                var e = arguments[0] || window.event,
                td = e.srcElement ? e.srcElement : e.target,
                tr =  td.parentNode,
                trn = tr.nodeName.toLowerCase(),
                tbodyn = tr.parentNode.nodeName.toLowerCase();
                if(trn == 'tr' && tbodyn == 'tbody'){
                    addClass(tr,"hover");
                };
            });
            addEvent(table,'mouseout',function(){
                var e = arguments[0] || window.event,
                td = e.srcElement ? e.srcElement : e.target,
                tr =  td.parentNode,
                trn = tr.nodeName.toLowerCase(),
                tbodyn = tr.parentNode.nodeName.toLowerCase();
                if(trn == 'tr' && tbodyn == 'tbody' && hasClass(tr,"hover")){
                    removeClass(tr,"hover");
                };
            });
        };
    };
};


以上代码很清晰，我就不做说明了，自己做个备份记录，后用

 

不断学习的ITer
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何在网页中调试JavaScript
ego的专栏
05-23 2343
如何在网页中调试JavaScript译者：ego日期：2004-5-23说明：译文中提到了一些调试工具，都给出了下载链接，csdn上链接效果不显著，需要鼠标放上去才可见 有许多方式可以调试 JavaScript。我们首先从代码本身讨论一下： 插入 alert 进入代码是最常见的方式，可以提示变量的值、类型，函数参数，对象属性。如果你用分支代码以支持分别做不同的事
网页运行js代码
weixin_33777877的博客
12-24 185
<SCRIPT> function Preview(obj) { var TestWin=open(''); TestWin.document.write(obj.value); } //欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 ...
浏览器中的JavaScript是如何运行的
最新发布
2401_84093248的博客
05-10 380
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
JavaScript代码是怎么在浏览器里面运行起来的？
heyYouU的博客
11-18 914
从js代码是怎么被执行的？简单了解一下浏览器内核与JS引擎。
网页中运行JS代码
weixin_33852020的博客
12-08 435
<SCRIPT> function Preview(obj) { var TestWin=open(''); TestWin.document.write(obj.value); } //欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 ...
如何在网页中运行自己的代码
11-30 2185
    function Preview(){  var TestWin=open(,,);  TestWin.document.open(text/html,replace);  TestWin.document.write(code.value);  TestWin.document.close();}运行
禁止JS运行的代码
10-28
然而，在某些情况下，我们可能希望禁用页面上的JavaScript代码，以保护用户的安全、防止恶意脚本或在特定环境中确保内容的正常显示。标题提到的“禁止JS运行的代码”主要涉及到HTML中的`<noscript>`标签。 `...
Java直接运行JS代码
09-27
Java提供了这样的能力，让我们可以直接在Java程序中运行JS代码。这主要得益于Oracle公司在Java 6版本引入的一个新特性——Java Scripting API（JSR 223），它允许Java程序执行多种脚本语言，包括JavaScript。 ### 1...
不使用浏览器运行javascript代码的方法
10-27
用js写一段小程序，但是又觉得使用浏览器去运行挺麻烦的，下面为大家介绍下如何使用java程序调用javascript程序，有类似需求的朋友可以参考下哈，希望对大家有所帮助
如何通过vscode运行调试javascript代码
10-15
它使得直接在VSCode内运行JS文件变得简单。 2. **创建JS文件**： 创建一个名为`hello_world.js`的文件，并添加如下代码： ```javascript var a = 1; var b = 2; console.log("hello world"); console.log("a ...
JS实现直接运行html代码的方法
12-03
另外，频繁使用`window.open()`可能会被浏览器拦截为弹窗，因此在实际应用中，可能需要考虑其他策略，如使用IFrame或者在当前页面内动态修改DOM来运行HTML代码。 此外，JavaScript还可以通过`innerHTML`属性或者`...
网页js脚本注入，可执行任意代码。
11-01
网页js脚本注入，可执行任意代码。这里有个实例教程，通过注入实现跳过验证码。
在已有网页上运行js脚本,js如何操作页面元素
chatgpt001的博客
11-22 1217
当我们用鼠标点击浏览器界面中的一个按钮时就触发了一个事件(即点击事件)，类似的还有很多其他事件，比如当鼠标移动到某个标签上，光标选中某个输入框等，这些都是事件，那么就，接下来就介绍一下一些常用的事件。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。注：使用方式二和方式三可做到事件与标签相分离，在测试代码时，可以使用方式一绑定标签与事件，在日常编程中建议使用方式二和方式三。
在网页中使用JavaScript
m0_60702855的博客
11-15 1130
2. js组成 1) ECMAScrpt 【js标准】（兼容性100%） (类似于CoreJava，制定了基础的语法) 注释 // 、/**/ 变量 操作符 流程控制语句 数组 对象 函数 正则表达式 ... 所有的js解释器都可以兼容ECMAScript 2) DOM：Document Object Model文档对象模型 js操作html的api 是针对XML但经过扩展用于HTML的应用程序编程接口。DOM将整个页面映射成一个多节点结构。 var dom=document.
input select & input unselect
weixin_30488313的博客
01-21 290
input select & input unselect input select https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select https://stackoverflow.com/questions/10413704/how-to-select-value-of-input-o...
打开网页就运行js方法
热门推荐
lzh657083979的博客
07-08 1万+
打开网页就运行js方法js方法<html> <head> </head> <body> <script type = "text/javascript"> window.onload = function() { alert("hello"); } </script> </body
打开网页就运行js代码
weixin_44556272的博客
05-13 1206
文章目录1. js2. jQuery 1. js window.onload = function(){} 2. jQuery // a. 方法一 $(document).ready(function(){}) // b. 方法二 $(function(){})
node.js怎么运行JavaScript代码？
07-23
要在 Node.js 中运行 JavaScript 代码，需要按照以下步骤进行操作： 1. 首先，确保已经安装了 Node.js。可以在终端（令行界面）中输入以下命令检查是否已安装 Node.js： ``` node -v ``` 如果已安装，将显示 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值