AJAX Tabs Javascript in XMLHTTPRequest mode.

[w00t]

1) Script Title:
Ajax Tabs

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

3) Describe problem:
You may (or may not) find this useful or want to somehow include it in a future release...

I needed a way to evaluate javascript content returned in the XHR of my tabs, because the iframe method was really not good enough (slow, ugly).. so I came up with this.

It still has a few quirks with external scripts in IE which I haven't solved yet (nor do I know whether I'll have the real need or motivation to do so, but eh..) but it works wonderfully for the most part.

Should you have any queries, don't hesitate to contact me. :)

On with the code:



if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){

document.getElementById(divId).innerHTML=page_request.responseText

ddajaxtabs.ajaxpageloadaction(pageurl, tabinstance);

// Revaluate all scripts that haven't been evaluated
var ScriptTags = document.getElementsByTagName('script');
for (var i = 0; i < ScriptTags.length; i++)
{
// If it's marked as evil, don't run it
if (ScriptTags[i].getAttribute("ref") == "ajaxtabs_dontrun")
continue;

// Mark the script as evil so we don't recurse
ScriptTags[i].setAttribute("ref", "ajaxtabs_dontrun");

// If it's an external script
if (ScriptTags[i].src)
{
// Include it in our body
var script = document.createElement('script');
script.setAttribute("type", "text/javascript");
script.setAttribute("src", ScriptTags[i].src);
script.setAttribute("ref", "ajaxtabs_dontrun");
document.getElementsByTagName("head")[0].appendChild(script)
}
else
{
// Otherwise; it's inline, add it to our body
var script;

// Opera (can) use .text, apparantly
if (typeof(ScriptTags[i].text) != "undefined")
script = ScriptTags[i].text;
else
script = ScriptTags[i].innerHTML;

// Now we need to run the JS, but, we need to set these as global - not local scope.. so, we can't just eval() the ****.

// IE
if (window.execScript)
window.execScript(script);
else // Other
window.setTimeout(script, 0);
}
}

[w00t]

I should also note that you probably *don't* want to use this for external tab content, only for scripts you control.

Otherwise, you're opening up your site to a very, very large XSS hole.

[ddadmin]

Thanks for sharing. There are a few scripts on DD that also include the ability to dynamically load .js and .css files as part of the Ajax request, such as Dynamic Ajax Content (http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm). And you're right, it should only be used to load external files you trust.

[w00t]

Right, got a slightly revised version which works fine with IE too:



// Revaluate all scripts that haven't been evaluated
var ScriptTags = document.getElementsByTagName('script');
for (var i = 0; i < ScriptTags.length; i++)
{
// If it's marked as evil, don't run it
if (ScriptTags[i].getAttribute("ref") == "ajaxtabs_dontrun")
continue;

// Mark the script as evil so we don't recurse
ScriptTags[i].setAttribute("ref", "ajaxtabs_dontrun");

var script = document.createElement('script');
script.setAttribute("type", "text/javascript");

// If it's an external script
if (ScriptTags[i].src)
{
// Include it in our body
script.setAttribute("src", ScriptTags[i].src);
}
else
{
// Opera can use .text
if (typeof(ScriptTags[i].text) != "undefined")
{
script.text = ScriptTags[i].text;
}
else
{
script.appendChild(document.createTextNode(ScriptTags[i].innerHTML));
}
}

document.getElementsByTagName("head")[0].appendChild(script);
document.getElementsByTagName("head")[0].removeChild(script);
}

[w00t]

*sigh*.

It seems this still doesn't work for external scripts in Opera.