您的位置：首页 > 运维架构 > 网站架构

如何在网站内运行 JS 代码

2011-10-20 15:59 387 查看

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

把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.oncopy=unselect;
document.onbeforecopy=unselect;
document.onmouseup=unselect;
document.onselect=unselect;
document.onpaste=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");
};
});
};
};
};

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： function table button class border div

相关文章推荐

新的分享

章节导航

如何在网站内 运行 JS 代码

如何在网站内运行 JS 代码