AJAX Tabs Javascript in XMLHTTPRequest mode.

[w00t]

1) Script Title:
Ajax Tabs

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...axtabscontent/

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. 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.