PDA

View Full Version : document.write('<script type= "text/javascript" ...



_com
Jul 26th, 2005, 08:59 PM
Will this document.write work therefore validate in W3C even ?



document.write('<script type="text/javascript" src="/js/myScript.js">');
document.write('<\/script>');

diablo2_v
Jul 26th, 2005, 09:00 PM
Yes, it will work. I have used it before.

_com
Jul 26th, 2005, 09:01 PM
did you check the code allready - mighty fast

diablo2_v
Jul 26th, 2005, 09:03 PM
I never tested it, but I know it is possible to do something like that.

And the syntax looks correct also.

So it 'should' work.

hourang
Jul 26th, 2005, 09:20 PM
you cannot do a script block inside of another script block, how are you using this?

diablo2_v
Jul 26th, 2005, 09:22 PM
This doesn't write a script block inside a script block. What this does is writes a script block into the document (body) of a page.

_com
Jul 26th, 2005, 09:28 PM
<script type= "text/javascript" src="/js/externals.js"></script>

code - externals.js [for some reason can be handy if executing complex DOM and such, asuming the code you exclude does not do anything in Ie5 mac but other code DOES so it wont interfere eg]


var ie5Mac = (navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1);

window.onload = initLoadExternalJsIfNotIeMac;
function initLoadExternalJsIfNotIeMac () {


if (!ie5Mac) {
document.write('<script type="text/javascript" src="/js/firstExternalJs.js">');
document.write('<\/script>');
document.write('<script type="text/javascript" src="/js/secondExternalJs.js">');
document.write('<\/script>');
}
}


or [but in this case would work but not necessary there is no need here]


<head>
<!-- .... -->
<script type="text/javascript">

document.write('<script type="text/javascript" src="/js/firstExternalJs.js">');
document.write('<\/script>');
document.write('<script type="text/javascript" src="/js/secondExternalJs.js">');
document.write('<\/script>');

</script>
<!-- .... -->
</head>

_com
Jul 26th, 2005, 09:33 PM
This doesn't write a script block inside a script block. What this does is writes a script block into the document (body) of a page.


or the head in this case

hourang
Jul 26th, 2005, 09:38 PM
<html>
<head>

<script type="text/javascript">

document.write('<script type= "text/javascript" src="/js/firstExternalJs.js">');
document.write('<\/script>');
document.write('<script type= "text/javascript" src="/js/secondExternalJs.js">');
document.write('<\/script>');

</script>

</head>
<body>

</body>
</html>


The page cannot be displayed
Error Type:
Active Server Pages, ASP 0138 (0x80004005)
A script block cannot be placed inside another script block.
/test2.asp, line 6

hourang
Jul 26th, 2005, 09:40 PM
asp dont like it, maybe it works for you?

_com
Jul 26th, 2005, 09:40 PM
did you test this page locally on IIS server

in this case it's HTML so test in a test.html

could you do a test.asp with this, and let me know what error this is giving in your test environment



<script type="text/javascript">
document.write('<link rel="Stylesheet" href="dummy.css" type="text/css" media="screen">');
</script>


dummy.css

body {font-size:100%;}

hourang
Jul 26th, 2005, 09:44 PM
did you test this page locally on IIS server

in this case it's HTML so test in a test.html

yeah thats weird it works in htm but cant do it in asp. dont make sense to me. this is on a local network webserver.

hourang
Jul 26th, 2005, 09:49 PM
the only thing different in the 2 files is the .asp instead of .html. i wonder if this will cause any problems in certain browsers. :confused:

_com
Jul 26th, 2005, 09:57 PM
try this in a test.asp - could work. In this case you fool the browser that is serving your asp pages. A wild guess is that the error messages check for the whole <script> and now it is broken up in two so it wont give an error ..?? this method is called 'browser spoofing'
In the head:




<script type="text/javascript">
document.write('<scr' + 'ipt type="text/javascript" src="/js/firstExternalJs.js"><\/scr' + 'ipt>');
document.write('\n'); // adds a line break
document.write('<scr' + 'ipt type="text/javascript" src="/js/secondExternalJs.js"><\/scr' + 'ipt>');
</script>


notify if it works this way ............

glenngv
Jul 27th, 2005, 06:20 AM
The proper way to dynamically include external js files is through DOM.


function includeJS(jsPath){
var js = document.createElement("script");
js.setAttribute("type", "text/javascript");
js.setAttribute("src", jsPath);
document.getElementsByTagName("head")[0].appendChild(js);
}

includeJS("/js/firstExternalJs.js");
includeJS("/js/secondExternalJs.js");

_com
Jul 27th, 2005, 08:20 AM
No need to load the function here?

The proper way to dynamically include external js files is through DOM.



// add a window.onload ?? or not, or something else
window.onload = includeJS; // how to do the window.onload here ??
// object detection?
var W3CDOM = document.createElement && document.getElementsByTagName;
function includeJS(jsPath){
// check browser support W3CDOM
if (!W3CDOM) {return;}
var js = document.createElement("script");
js.setAttribute("type", "text/javascript");
js.setAttribute("src", jsPath);
document.getElementsByTagName("head")[0].appendChild(js);
}

includeJS("/js/firstExternalJs.js");
includeJS("/js/secondExternalJs.js");
}




This I tried but written somehow different (more lines, yours is shorter), the scripts got appended to the head in the DOM but the scripts were not executed as the document.write did work.




window.onload=createExternal;
var W3CDOM = document.createElement && document.getElementsByTagName;


function createExternal(){
if (!W3CDOM) {return;}
var objHead = document.getElementsByTagName('head')[0];
var oJs = document.createElement('script');
var oJsTwo = document.createElement('script');

oJs.setAttribute('type','text/javascript');
oJs.setAttribute('src','/js/firstone.js');
objHead.appendChild(oJs);
oJsTwo.setAttribute('type','text/javascript');
oJsTwo.setAttribute('src','/js/secondone.js');
objHead.appendChild(oJstwo);
}

I agree that the DOM script is the way to go, document.write would be appropriate if support needed for non DOM browsers.

glenngv
Jul 27th, 2005, 08:46 AM
No need to load the function here?


The proper way to dynamically include external js files is through DOM.


// add a window.onload ?? or not, or something else
window.onload = includeJS; // object detection?
var W3CDOM = document.createElement && document.getElementsByTagName;
function includeJS(jsPath){
// check browser support W3CDOM
if (!W3CDOM) {return;}
var js = document.createElement("script");
js.setAttribute("type", "text/javascript");
js.setAttribute("src", jsPath); document.getElementsByTagName("head")[0].appendChild(js);
}

includeJS("/js/firstExternalJs.js");
includeJS("/js/secondExternalJs.js");


You add some code in my quoted post? The W3CDOM check is nice but the window.onload part is wrong because no js path is passed.

The function I created is more generic, you just pass the js path and no need to set script properties many times.

_com
Jul 27th, 2005, 09:01 AM
if want to use window.onload with your function, howto if the function is like yours always get stuck because of the includeJS(jsPath):



var W3CDOM = document.createElement && document.getElementsByTagName;
function includeJs(jsPath){
// check browser support W3CDOM
if (!W3CDOM) {return;}
var js = document.createElement("script");
js.setAttribute("type", "text/javascript");
js.setAttribute("src", jsPath);
document.getElementsByTagName("head")[0].appendChild(js);
}

includeJS("/js/firstExternalJs.js");
includeJS("/js/secondExternalJs.js");


this question about loading scripts is because in this case I have more functions to load too.

eg could do


function jsOne () {//some code here}
function jsTwo () {//some code here}

var W3CDOM = document.createElement && document.getElementsByTagName;
function includeJs(jsPath){
// check browser support W3CDOM
if (!W3CDOM) {return;}
var js = document.createElement("script");
js.setAttribute("type", "text/javascript");
js.setAttribute("src", jsPath);
document.getElementsByTagName("head")[0].appendChild(js);
}



/* helper function to load multiple functions, courtesy Simon Wilson */
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}



addLoadEvent(jsOne);
addLoadEvent(jsTwo);
// how to add eg your type of function in this construct
// includeJS("/js/firstExternalJs.js"); ??
// includeJS("/js/secondExternalJs.js"); ??
addLoadEvent(includeJs("/js/firstExternalJs.js")); // maybe like this ?
addLoadEvent(includeJs("/js/secondExternalJs.js")); // maybe like this ?

_com
Jul 27th, 2005, 10:59 AM
Originally Posted by glenngv
The proper way to dynamically include external js files is through DOM.


Note that Safari 1.x cannot append external scripts this way. So a document.write will be needed if need support for the latter browser.

glenngv
Jul 27th, 2005, 12:07 PM
// how to add eg your type of function in this construct
// includeJS("/js/firstExternalJs.js"); ??
// includeJS("/js/secondExternalJs.js"); ??
addLoadEvent(includeJs("/js/firstExternalJs.js")); // maybe like this ?
addLoadEvent(includeJs("/js/secondExternalJs.js")); // maybe like this ?
[/PHP]

addLoadEvent( function(){ includeJs("/js/firstExternalJs.js") } );
addLoadEvent( function(){ includeJs("/js/secondExternalJs.js") } );
But you can call includeJs() as the page is loading (in the head). Actually, it's safer doing that because you can be sure that the js files are completely loaded when you call its functions onload. If you include those js files onload and then call its functions also onload, you can't always be sure that those files are completely loaded.

_com
Jul 27th, 2005, 01:26 PM
addLoadEvent( function(){ includeJs("/js/firstExternalJs.js") } );
addLoadEvent( function(){ includeJs("/js/secondExternalJs.js") } );
But you can call includeJs() as the page is loading (in the head). Actually, it's safer doing that because you can be sure that the js files are completely loaded when you call its functions onload. If you include those js files onload and then call its functions also onload, you can't always be sure that those files are completely loaded.

I am running a lot more scripts that make use of the window.onload handler so should this script be executed first ??



var W3CDOM = document.createElement && document.getElementsByTagName;
function includeJS(jsPath){
// check browser support W3CDOM
if (!W3CDOM) {return;}
var js = document.createElement("script");
js.setAttribute("type", "text/javascript");
js.setAttribute("src", jsPath);
document.getElementsByTagName("head")[0].appendChild(js);
}

includeJS("/js/firstExternalJs.js");
includeJS("/js/secondExternalJs.js");
// } this brace is a stray brace - therefore not needed ??

glenngv
Jul 27th, 2005, 01:51 PM
I am running a lot more scripts that make use of the window.onload handler so should this script be executed first ??
...
includeJS("/js/firstExternalJs.js");
includeJS("/js/secondExternalJs.js");
// } this brace is a stray brace - therefore not needed ??


IF you're calling functions that reside in those dynamically added external js files, you need to add them as soon as the page is loading so that you can be sure that the external files are completely loaded when you call the functions onload.

The stray brace is not needed. There's nothing like that in my original post.

_com
Jul 27th, 2005, 02:51 PM
It works ok now. Except these browsers dont append the script: more info http://www.howtocreate.co.uk/loadingExternalData.html

So would it be better to do this object detection. I guess it does not make any difference ...

if( document.createElement && document.childNodes ) {
// execute code
)

martin_narg
Jul 27th, 2005, 03:19 PM
you cannot do a script block inside of another script block, how are you using this?

ASP parses the response to the client as a string, essentially what it is doing is finding <script> tags and checking them as a generic language before processing them (either to the client or the server(which is where the error should only be appearing)). This is because you cannot nest script blocks on an ASP page, the automatic error manager kicks in and tells you that it's bad mojo. It should really leave client-side scripting well alone, but because you can nominate scripts to runat="server" as JScript/VBScript/etc, the page feels you are trying to nest.

It's easy enough to get around, simply concatanating works just fine:


<script type="text/javascript">
document.write('<scr'+'ipt type="text/javascript" src="external.js"></script>');
</script>


However! You are definately better off using glenngv's method as it is the proper way to do this.

The same issue can also be seen when writing out style and script tags directly into the Response object:


Response.Write "<script type=""text/javascript"">"
Response.Write "alert('hello world');"
Response.Write "</script>"

However this works:


Response.Write "<scr"&"ipt type=""text/javascript"">"
Response.Write "alert('hello world');"
Response.Write "</script>"


Hope this helps

m_n

_com
Jul 27th, 2005, 04:00 PM
try this in a test.asp - could work. In this case you fool the browser that is serving your asp pages. A wild guess is that the error messages check for the whole <script> and now it is broken up in two so it wont give an error ..?? this method is called 'browser spoofing'
In the head:




<script type="text/javascript">
document.write('<scr' + 'ipt type="text/javascript" src="/js/firstExternalJs.js"><\/scr' + 'ipt>');
document.write('\n'); // adds a line break
document.write('<scr' + 'ipt type="text/javascript" src="/js/secondExternalJs.js"><\/scr' + 'ipt>');
</script>




Is this solution (see some posts before on this thread) also ok to use or do you need the response.write, thought one could mix HTML and asp code ... [asp]

hourang
Jul 27th, 2005, 04:04 PM
Is this solution (see some posts before on this thread) also ok to use or do you need the response.write, thought one could mix HTML and asp code ... [asp]

yeah that works, i jumped the gun, tested your code and got the error and responded without figuring out what was going on. i didnt think you could put script tags inside a script.

_com
Jul 27th, 2005, 04:04 PM
It's easy enough to get around, simply concatanating works just fine:


<script type="text/javascript">
document.write('<scr'+'ipt type="text/javascript" src="external.js"></script>');
</script>



For validation purposes there is need to escape the last / of the closing script tag.



<script type="text/javascript">
document.write('<scr'+'ipt type="text/javascript" src="external.js"><\/script>');
</script>


Also NOTE THE ALTERNATIVE DOM script fails in these browsers (<http://www.howtocreate.co.uk/loadingExternalData.html>):

Safari, Konqueror, OmniWeb 4.5+, Internet Explorer on Mac, Opera 7.23-, ICEbrowser, and 4th generation browsers like Internet Explorer 4-, Netscape 4, Opera 6- and iCab do not support this technique.

martin_narg
Jul 27th, 2005, 04:12 PM
yeah, my apologies - it should do.

I was really just posting to theorise the script block problem. This is one of those situations where OS would help a lot - it would be easy enough to write some form of regular expression in the Response object HTML parser so that it would only check nested script blocks if they were pointed to run at the server.

I can't really see Microsoft turning IIS OS tho... Even writing an IIS extension won't do it :rolleyes:

m_n

_com
Jul 27th, 2005, 04:50 PM
yeah that works, i jumped the gun, tested your code and got the error and responded without figuring out what was going on. i didnt think you could put script tags inside a script.

The script tags are to indicate a JS function will be executed.
document.write as it says writes code to a document.