phiggins42 · February 20, 2011 11:43
diff --git a/iframecrap.html b/iframecrap.html
 <!DOCTYPE html>
 <html>
 <head>
    <title>Dojo x-domain Skeleton</title>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="isDebug:true"></script>
    <script>
        dojo.ready(function(){
            
            var dojoUrl = "http://ajax.googleapis.com/ajax/libs/dojo/1.5/"
            
            var content = [
                "<html>", 
                "<head>", 
                    "<title>foo</title>", 
                    "<link rel='stylesheet' href='", dojoUrl, "dijit/themes/claro/claro.css'>",
                    "<style type='text/css'>",
                    "   @import '", dojoUrl, "dojox/image/resources/Lightbox.css';\n",
                    "   #foo { color:blue; }",
                    "</style>",
                    "<scr", "ipt ",
                    // required to make test3 work. dojo needs to be tricked into working post-domready
                    "djConfig='afterOnLoad:true'",
                    " src='", dojoUrl, "dojo/dojo.xd.js'></", "scr", "ipt>",
                    // the issue is a second script here is eval'd before the previous dojo.js is done. this seems all async
                    
                    // the timeout works because it never takes 5s to load dojo.js, but it could maybe. this is wrong:
 //                    "<scr", "ipt>",
 //                        "setTimeout(function(){ dojo.ready(function(){ dojo.byId('foo').innerHTML = 'WORKED'; }); }, 5000)",
 //                    "</", "scr", "ipt>",
                "</head>",
                "<body class='claro'>",
                    "<div id='foo'></div>",
                "</body>",
                "</html>"
            ];
            
            function getdoc(frame){
                return frame.contendDocument || frame.contentWindow.document;
            }
            
            function addscripttext(doc, code){
                
                var e = doc.createElement("script"),
                    how = "text" in e ? "text" :
                        "textContent" in e ? "textContent" :
                        "innerHTML" in e ? "innerHTML" :
                        "appendChild"
                ;
                    
                if(how == "appendChild"){
                    e[how](d.doc.createTextNode(code));
                }else{
                    e[how] = code;
                }
                    
                doc.getElementsByTagName("head")[0].appendChild(e);

            }
            
            function test1(){
                // ie fails this with the script async stuff mentioned above
                var frame = dojo.create("iframe");
                dojo.place(frame, dojo.body());            
                dojo.style(frame, {
                    width:"400px", height:"400px",
                    border:"1px solid #666"
                });

                var doc = getdoc(frame)

                try{
                    doc.open()
                    doc.write(content.join(""));
                    doc.close();
                }catch(e){
                    console.warn("error", e);
                }
            }
            // test1()
            
            function test2(){
                // using an existing node doesn't help
                var frame = dojo.byId("bambam");
                var doc = getdoc(frame);
                doc.open()
                doc.write(content.join(""));
                doc.close();
            }
            // test2()
            
            var test3and4text = ""+
            "    dojo.require('dijit.Dialog');" +
            "    dojo.ready(function(){ " +
            "       dojo.byId('foo').innerHTML = dojo.version; console.warn('hi');" +
            "       var dialog = new dijit.Dialog({ title:'Hi', content:'<p>Boooo</p>' });" +
            "       console.log(dialog); try{ dialog.show(); }catch(e){ alert('oops'); }" +
            "})";
            
            function test3(){
                // but we can totally just inject the iframe content, wait for onload
                // then push however many scripts we care about (provided they assume dojo.js is ready, which it is)
                
                var frame = dojo.create("iframe", {}, dojo.body());
                var doc = getdoc(frame);
                
                doc.open();
                
                var e;
                function closeit(ev){
                    // finally found a real use for noteval! 
                    addscripttext(doc, test3and4text);
                }
                
                // remember to disconnect too:
                if(frame.addEventListener){
                    e = frame.addEventListener("load", closeit, false);
                }else if(frame.attachEvent){
                    e = frame.attachEvent("onload", closeit);
                }
                
                // one pass:
                doc.write(content.join(""));
                setTimeout(function(){ doc.close(); }, 50); // no reason really, just a buffer :P
                
            }
            test3();
            
            function test4(){
                // can we doc.write(headstuff); doc.write(script src); doc.write(script with content); and it work
                // answer: no it seems. same behavior as bulk doc.write
                var frame = dojo.create("iframe", {}, dojo.body());
                var doc = getdoc(frame);
                
                doc.open();
                doc.write("<!doctype html><html><head><title>hi</title>");
                doc.write("<link rel='stylesheet' href='" + dojoUrl + "dijit/themes/claro/claro.css'");
                doc.write("<scr" + "ipt src='" + dojoUrl + "dojo/dojo.xd.js'><" + "/scr" + "ipt>");
                // CodeGlass works if we add each script and do crazy readyState monitoring. test3 works without all that.
                doc.write("<scr" + "ipt>" + test3and4text + "</" + "script>");
                doc.write("</head><body class='claro'><div id='foo'></div></body></html>");
                doc.close();
                
            }
            //test4();
        });
    </script>
 </head>
 <body class="claro">
    <!-- uncomment for test2: -->
    <!--iframe id="bambam"></iframe-->
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Dojo x-domain Skeleton</title>
	<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="isDebug:true"></script>
	<script>
	dojo.ready(function(){

	var dojoUrl = "http://ajax.googleapis.com/ajax/libs/dojo/1.5/"

	var content = [
	"<html>",
	"<head>",
	"<title>foo</title>",
	"<link rel='stylesheet' href='", dojoUrl, "dijit/themes/claro/claro.css'>",
	"<style type='text/css'>",
	" @import '", dojoUrl, "dojox/image/resources/Lightbox.css';\n",
	" #foo { color:blue; }",
	"</style>",
	"<scr", "ipt ",
	// required to make test3 work. dojo needs to be tricked into working post-domready
	"djConfig='afterOnLoad:true'",
	" src='", dojoUrl, "dojo/dojo.xd.js'></", "scr", "ipt>",
	// the issue is a second script here is eval'd before the previous dojo.js is done. this seems all async

	// the timeout works because it never takes 5s to load dojo.js, but it could maybe. this is wrong:
	// "<scr", "ipt>",
	// "setTimeout(function(){ dojo.ready(function(){ dojo.byId('foo').innerHTML = 'WORKED'; }); }, 5000)",
	// "</", "scr", "ipt>",
	"</head>",
	"<body class='claro'>",
	"<div id='foo'></div>",
	"</body>",
	"</html>"
	];

	function getdoc(frame){
	return frame.contendDocument \|\| frame.contentWindow.document;
	}

	function addscripttext(doc, code){

	var e = doc.createElement("script"),
	how = "text" in e ? "text" :
	"textContent" in e ? "textContent" :
	"innerHTML" in e ? "innerHTML" :
	"appendChild"
	;

	if(how == "appendChild"){
	e[how](d.doc.createTextNode(code));
	}else{
	e[how] = code;
	}

	doc.getElementsByTagName("head")[0].appendChild(e);

	}

	function test1(){
	// ie fails this with the script async stuff mentioned above
	var frame = dojo.create("iframe");
	dojo.place(frame, dojo.body());
	dojo.style(frame, {
	width:"400px", height:"400px",
	border:"1px solid #666"
	});

	var doc = getdoc(frame)

	try{
	doc.open()
	doc.write(content.join(""));
	doc.close();
	}catch(e){
	console.warn("error", e);
	}
	}
	// test1()

	function test2(){
	// using an existing node doesn't help
	var frame = dojo.byId("bambam");
	var doc = getdoc(frame);
	doc.open()
	doc.write(content.join(""));
	doc.close();
	}
	// test2()

	var test3and4text = ""+
	" dojo.require('dijit.Dialog');" +
	" dojo.ready(function(){ " +
	" dojo.byId('foo').innerHTML = dojo.version; console.warn('hi');" +
	" var dialog = new dijit.Dialog({ title:'Hi', content:'<p>Boooo</p>' });" +
	" console.log(dialog); try{ dialog.show(); }catch(e){ alert('oops'); }" +
	"})";

	function test3(){
	// but we can totally just inject the iframe content, wait for onload
	// then push however many scripts we care about (provided they assume dojo.js is ready, which it is)

	var frame = dojo.create("iframe", {}, dojo.body());
	var doc = getdoc(frame);

	doc.open();

	var e;
	function closeit(ev){
	// finally found a real use for noteval!
	addscripttext(doc, test3and4text);
	}

	// remember to disconnect too:
	if(frame.addEventListener){
	e = frame.addEventListener("load", closeit, false);
	}else if(frame.attachEvent){
	e = frame.attachEvent("onload", closeit);
	}

	// one pass:
	doc.write(content.join(""));
	setTimeout(function(){ doc.close(); }, 50); // no reason really, just a buffer :P

	}
	test3();

	function test4(){
	// can we doc.write(headstuff); doc.write(script src); doc.write(script with content); and it work
	// answer: no it seems. same behavior as bulk doc.write
	var frame = dojo.create("iframe", {}, dojo.body());
	var doc = getdoc(frame);

	doc.open();
	doc.write("<!doctype html><html><head><title>hi</title>");
	doc.write("<link rel='stylesheet' href='" + dojoUrl + "dijit/themes/claro/claro.css'");
	doc.write("<scr" + "ipt src='" + dojoUrl + "dojo/dojo.xd.js'><" + "/scr" + "ipt>");
	// CodeGlass works if we add each script and do crazy readyState monitoring. test3 works without all that.
	doc.write("<scr" + "ipt>" + test3and4text + "</" + "script>");
	doc.write("</head><body class='claro'><div id='foo'></div></body></html>");
	doc.close();

	}
	//test4();
	});
	</script>
	</head>
	<body class="claro">
	<!-- uncomment for test2: -->
	<!--iframe id="bambam"></iframe-->
	</body>
	</html>