Функция выполняет роль обычного setter'а в innerHTML но при этом выполняет скрипты найденные в HTML.
Функция мало кому нужная, но тут попросили написать такую хрень, вот и написал. Если кому надо используйте. Ах да, она еще может работать как jQuery плагин, тоесть если у вас подключен jQuery то можно вызывать ее через jQuery.
var evalHTML = (function(){
var fn = function( elem, str ) {
str = str || elem;
var stack = [], result;
str = str.replace( /<script(?:[^>]*src="([^"]+)")?[^>]*>([\s\S]*?)<\/script>/gi, function( all, src, scriptText ) {
stack[ stack.length ] = src ? { src: src } : { script: scriptText };
return "";
});
if ( window.jQuery && this instanceof jQuery ) {
result = this.html( str );
} else {
elem.innerHTML = str;
}
for( var i = 0; i < stack.length; i++ ) {
if ( stack[ i ].src ) {
var l, script, exists = false,
head = document.getElementsByTagName( 'head' )[ 0 ],
scripts = document.getElementsByTagName( 'script' );
for( l = 0; script = scripts[ l++ ]; ) {
if ( script.src.indexOf( stack[ i ].src ) != -1 ) {
exists = true;
break;
}
}
if ( !exists ) {
script = document.createElement('script');
script.src = stack[ i ].src;
script.type = "text/javascript";
head.appendChild( script );
}
} else {
( window.execScript || function( data ) {
window[ "eval" ].call( window, data );
} )( stack[ i ].script );
}
}
return result;
}
if ( window.jQuery ) {
jQuery.fn.evalHTML = fn;
}
return fn;
})();
пример без jQuery:
<div id="view"></div>
<script type="text/javascript">
var evalHTML = (function(){
var fn = function( elem, str ) {
str = str || elem;
var stack = [], result;
str = str.replace( /<script(?:[^>]*src="([^"]+)")?[^>]*>([\s\S]*?)<\/script>/gi, function( all, src, scriptText ) {
stack[ stack.length ] = src ? { src: src } : { script: scriptText };
return "";
});
if ( window.jQuery && this instanceof jQuery ) {
result = this.html( str );
} else {
elem.innerHTML = str;
}
for( var i = 0; i < stack.length; i++ ) {
if ( stack[ i ].src ) {
var head = document.getElementsByTagName( 'head' )[ 0 ],
script = document.createElement('script');
script.src = stack[ i ].src;
script.type = "text/javascript";
head.appendChild( script );
} else {
( window.execScript || function( data ) {
window[ "eval" ].call( window, data );
} )( stack[ i ].script );
}
}
return result;
}
if ( window.jQuery ) {
jQuery.fn.evalHTML = fn;
}
return fn;
})();
var html = "<b>Жирный текст<script>alert('а я алерт который динамично вставили.');<"+"/script></b>";
evalHTML( document.getElementById( 'view' ), html );
</script>
пример c jQuery:
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<div id="view"></div>
<script type="text/javascript">
var evalHTML = (function(){
var fn = function( elem, str ) {
str = str || elem;
var stack = [], result;
str = str.replace( /<script(?:[^>]*src="([^"]+)")?[^>]*>([\s\S]*?)<\/script>/gi, function( all, src, scriptText ) {
stack[ stack.length ] = src ? { src: src } : { script: scriptText };
return "";
});
if ( window.jQuery && this instanceof jQuery ) {
result = this.html( str );
} else {
elem.innerHTML = str;
}
for( var i = 0; i < stack.length; i++ ) {
if ( stack[ i ].src ) {
var head = document.getElementsByTagName( 'head' )[ 0 ],
script = document.createElement('script');
script.src = stack[ i ].src;
script.type = "text/javascript";
head.appendChild( script );
} else {
( window.execScript || function( data ) {
window[ "eval" ].call( window, data );
} )( stack[ i ].script );
}
}
return result;
}
if ( window.jQuery ) {
jQuery.fn.evalHTML = fn;
}
return fn;
})();
var html = "<b>Жирный текст<script>alert('а я алерт который динамично вставили.');<"+"/script></b>";
$( "#view" ).evalHTML( html );
</script>