虽然可以动态的加载嵌入HTML中,但是根本就不会被执行。求教高手有什么办法来解决这个问题吗?
说句实话有些程序员总是吹嘘Javascript有多强大多强大~我看连include语句都没有的语言原本就弱智的很~
我的代码如下:
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script>
loadFile("include.js");
alert(vv);
function loadFile(filePath){
var element=null;
element=document.createElement('script')
element.setAttribute("type","text/javascript")
element.setAttribute("src", filePath)
var eHead=document.getElementsByTagName("head");
if(eHead!=null)
{
eHead[0].appendChild(element)
return true;
}else{
return false;
}
}
</script>
</head>
<body>
</body>
</html>被动态加载的js脚本:
var vv = "I am a variable!";javascripthtml脚本include
说句实话有些程序员总是吹嘘Javascript有多强大多强大~我看连include语句都没有的语言原本就弱智的很~
我的代码如下:
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script>
loadFile("include.js");
alert(vv);
function loadFile(filePath){
var element=null;
element=document.createElement('script')
element.setAttribute("type","text/javascript")
element.setAttribute("src", filePath)
var eHead=document.getElementsByTagName("head");
if(eHead!=null)
{
eHead[0].appendChild(element)
return true;
}else{
return false;
}
}
</script>
</head>
<body>
</body>
</html>被动态加载的js脚本:
var vv = "I am a variable!";javascripthtml脚本include
上面只是个最简单的小例程~只有解决了动态include的问题我后面的问题才能解决
alert(window.vv);//指定到这句的时候js文件都还没下载好
//////////////
window.onload=function(){
alert(vv)
}
function loadFile(filePath){
var element=null;
element=document.createElement('script')
element.setAttribute("type","text/javascript")
element.setAttribute("src", filePath)
var eHead=document.getElementsByTagName("head");
if(eHead!=null)
{
eHead[0].appendChild(element)
return true;
}else{
return false;
}
}
http://www.blogjava.net/merek/articles/269233.html
function include(src,encoding,fun)
{
var s = document.createElement('script');
s.type='text/javascript';
s.charset=encoding; //'gb2312';
s.src = src;
var tags =document.getElementsByTagName('head');
if(typeof(fun)=='function'){
if( document.all ){
s.onreadystatechange = function(){
if(/(complete|loaded)/.test(this.readyState)){
fun(); s.onreadystatechange = null; s.parentNode.removeChild(s);
}};
}else{
s.onload = function(){ fun(); s.onload = null; s.parentNode.removeChild(s); };
}
}
tags[0].appendChild(s);
};
include("include.js","utf-8",function(){alert(vv);});
我知道jQuery的资料很多,但我想用YUI,不想用jQuery……
你的代码我试了下~但貌似有些问题~就是用火狐虽然能加载成功,但后面那个正在加载的图标总是转啊转啊不停(一直在连接状态不断开)~IE浏览器也是这样~可以帮我看下哪里的问题吗?代码如下:
主文件:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>template test</title>
<!--模版引擎-->
<script src="t.min.js"></script>
<script> include("include.js", handler); function handler(){
//render函数(),传入变量是Json数据。
var html = render({"title":"你好!"});
document.write(html);
} function include(src,fun)
{
var s = document.createElement('script');
s.type='text/javascript';
s.src = src;
var tags =document.getElementsByTagName('head');
if(typeof(fun)=='function'){
if( document.all ){
s.onreadystatechange = function(){
if(/(complete|loaded)/.test(this.readyState)){
fun(); s.onreadystatechange = null; s.parentNode.removeChild(s);
}};
}else{
s.onload = function(){ fun(); s.onload = null; s.parentNode.removeChild(s); };
}
}
tags[0].appendChild(s);
};</script>
</head><body>
<h1>基本例子</h1></body>
</html>
被动态加载的js文件:
//模版文件
var render = template.compile('font_test', '<p>我瞧一瞧</p><p><%= title%></p> <table> <%for (i=1; i<10; i++) {%> <tr> <%for (j=1; j <= i; j++) {%> <td><%= j + " x " + i + " = " + j*i%></td> <%if (i == j) {%><%= "</tr>"%><%}%> <%}%> <%}%> </table>');
最后上传模版引擎,代码有些多:
/*artTemplate - Template Engine*/var template=function(e,t){return template[typeof t=="object"?"render":"compile"].apply(template,arguments)};(function(e,t){"use strict";e.version="1.4.0",e.openTag="<%",e.closeTag="%>",e.parser=null,e.render=function(e,t){var n=l(e);return n===undefined?c({id:e,name:"Render Error",message:"Not Cache"}):n(t)},e.compile=function(t,r){function u(n){try{return(new s(n)).template}catch(o){return i?(o.id=t||r,o.name="Render Error",o.source=r,c(o)):e.compile(t,r,!0)(n)}}var i=arguments[2];typeof r!="string"&&(i=r,r=t,t=null);try{var s=f(r,i)}catch(o){return o.id=t||r,o.name="Syntax Error",c(o)}return u.prototype=s.prototype,u.toString=function(){return s.toString()},t&&(n[t]=u),u},e.helper=function(e,t){a[e]=t};var n={},r="".trim,i=r&&!t.document,s={},o=function(){var e=Array.prototype.forEach||function(e,t){var n=this.length>>>0;for(var r=0;r<n;r++)r in this&&e.call(t,this[r],r,this)};return function(t,n){e.call(t,n)}}(),u=Object.create||function(e){function t(){}return t.prototype=e,new t},a=e.prototype={$forEach:o,$render:e.render,$getValue:function(e){return e===undefined?"":e}};o("break,case,catch,continue,debugger,default,delete,do,else,false,finally,for,function,if,in,instanceof,new,null,return,switch,this,throw,true,try,typeof,var,void,while,with,abstract,boolean,byte,char,class,const,double,enum,export,extends,final,float,goto,implements,import,int,interface,long,native,package,private,protected,public,short,static,super,synchronized,throws,transient,volatile,arguments,let,yield".split(","),function(e){s[e]=!0});var f=function(t,n){function x(e){return p+=e.split(/\n/).length-1,e=e.replace(/('|"|\\)/g,"\\$1").replace(/\r/g,"\\r").replace(/\n/g,"\\n"),e=m[1]+"'"+e+"'"+m[2],e+"\n"}function T(e){var t=p;return l?e=l(e):n&&(e=e.replace(/\n/g,function(){return p++,"$line="+p+";"})),e.indexOf("=")===0&&(e=e.substring(1).replace(/[\s;]*$/,""),r&&(e="$getValue("+e+")"),e=m[1]+e+m[2]),n&&(e="$line="+t+";"+e),N(e),e+"\n"}function N(e){e=e.replace(/\/\*.*?\*\/|'[^']*'|"[^"]*"|\.[\$\w]+/g,""),o(e.split(/[^\$\w\d]+/),function(e){if(/^this$/.test(e))throw{message:'Prohibit the use of the "'+e+'"'};if(!e||s.hasOwnProperty(e)||/^\d/.test(e))return;d.hasOwnProperty(e)||(C(e),d[e]=!0)})}function C(e){var t;e==="print"?t=y:e==="include"?t=b:a.hasOwnProperty(e)?t="$helpers."+e:t="$data."+e,v+=e+"="+t+","}var i=e.openTag,f=e.closeTag,l=e.parser,c=t,h="",p=1,d={$out:!0,$line:!0},v="var $helpers=this,"+(n?"$line=0,":""),m=r?["$out='';","$out+=",";","$out"]:["$out=[];","$out.push(",");","$out.join('')"],g=r?"if(content!==undefined){$out+=content;return content}":"$out.push(content);",y="function(content){"+g+"}",b="function(id,data){if(data===undefined){data=$data}var content=$helpers.$render(id,data);"+g+"}";o(c.split(i),function(e,t){e=e.split(f);var n=e[0],r=e[1];e.length===1?h+=x(n):(h+=T(n),r&&(h+=x(r)))}),c=h,n&&(c="try{"+c+"}catch(e){"+"e.line=$line;"+"throw e"+"}"),c=v+m[0]+c+"this.template="+m[3];try{var w=new Function("$data",c),E=w.prototype=u(a);return E.toString=function(){return this.template},w}catch(S){throw S.temp="function anonymous($data) {"+c+"}",S}},l=function(t){var r=n[t];if(r===undefined&&!i){var s=document.getElementById(t);return s&&e.compile(t,s.value||s.innerHTML),n[t]}if(n.hasOwnProperty(t))return r},c=function(e){function r(){return r+""}var n="[template]:\n"+e.id+"\n\n[name]:\n"+e.name;return e.message&&(n+="\n\n[message]:\n"+e.message),e.line&&(n+="\n\n[line]:\n"+e.line,n+="\n\n[source]:\n"+e.source.split(/\n/)[e.line-1].replace(/^[\s\t]+/,"")),e.temp&&(n+="\n\n[temp]:\n"+e.temp),t.console&&console.error(n),r.toString=function(){return"{Template Error}"},r}})(template,this),typeof module!="undefined"&&module.exports&&(module.exports=template)
template直接放在js库,然后做个模板对象,模板对象自行ajax加载模板或缓存。这样ajax只要去调用模板文件和数据文件,没加载js之类的事。
要讨论的就是这个问题,js文件是我的模版文件,当然也可以以html为后缀,随便什么都可以。
可是就是你说的这个模版对象,没有办法动态加载模版~
你仔细看看我14L的帖子,那个要被加载的js文件就是模版
compile里的参数分为模板和数据,按需要ajax下载后再重新拼装。