PDA

View Full Version : puting script tag dynamically in head crashes IE



jigarshah
01-19-2007, 02:49 PM
I am trying to add "<script>" tag in head section through javascript.
trial page

http://jigarashah.50webs.com/googleHead.html



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>My Google AJAX Search API Application</title>
<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>
<script src="googleHead.js" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">

//<![CDATA[

function OnLoad() {
// Create a search control
var searchControl = new GSearchControl();

// Add in a full set of searchers
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());

// Set the Local Search center point
localSearch.setCenterPoint("New York, NY");

// Tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));

// Execute an inital search
searchControl.execute("Google");
}

//]]>
</script>
</head>

<body onload="OnLoad()">
<div id="searchcontrol"/>
</body>
</html>


http://jigarashah.50webs.com/googleHead.js


putGoogleSearchscript();

function putGoogleSearchscript() {
var key = 'ABQIAAAAnm6m31gbt_LgIZtU-_qGiBSzw8s6-P8gHRdt7bjmGcPTAmzhSxRDPCRBG0pWo48_Qjk-Pbrc-fNfeA';
var scriptTag=document.createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.src='http://www.google.com/uds/api?file=uds.js&amp;v=0.1&amp;key=' + key ;
var element = document.getElementsByTagName("head")[0];

/* this statement causes IE crash */
element.appendChild(scriptTag);
}

jscheuer1
01-20-2007, 09:01 AM
There are two things that jump out at me. You really shouldn't be calling your onload function 'OnLoad()'. I know that it should be case sensitive but, in IE (and sometimes other browsers) this is can be lost track of. Use a totally non-reserved name like:

myOnload()

OK, now the next thing that bothers me is the named entities in the src attribute assignment, I would use:


scriptTag.src='http://www.google.com/uds/api?file=uds.js&v=0.1&key=' + key ;

Since HTML is not involved in any way, named entities would most likely just become a literal part of the string. If so, it would be invalid at best.

Try it with those two modifications and see - I am assuming that this is working in other browsers 'as is', is it?

Oh, and if the server serves this page as XHTML/xml, IE cannot parse it. Switch to HTML 4.01 strict with a plain opening <html> tag.

jigarshah
01-21-2007, 07:23 PM
i think i solved it by removing named entities. But i am not sure whether it works. I tried on local machine it works but on web again it fails. I don't know whether its problem with IE caching. It still hangs IE. :)

Really IE sucks...Making pages compatible with is really a headache. It works fine with almost all other browsers. (SAfari, Firefox, Flock, Opera Konquerer ....all of them) Anyways thanks for help.

jscheuer1
01-22-2007, 04:37 AM
Another thing you could try is escaping the ampersand:


scriptTag.src='http://www.google.com/uds/api?file=uds.js\&v=0.1\&key=' + key ;

or even:


scriptTag.src='http%3A%2F%2Fwww.google.com%2Fuds%2Fapi%3Ffile%3Duds.js%26v%3D0.1%26key%3D' + key ;

Also make sure to try my other previous suggestions.

jigarshah
01-22-2007, 04:43 AM
another strange thing i noticed was if i put an alert statement printing srciptTag

alert(scriptTag)

then it works :) What exactly tht means ? I will try with your suggestions

jigarshah
01-22-2007, 06:05 AM
look at these two. Only difference is i have an alert box before appending child node. First one does not work. It fails to put script tag in code.


putGoogleSearchscript();

function putGoogleSearchscript() {
var key = 'ABQIAAAAnm6m31gbt_LgIZtU-_qGiBSzw8s6-P8gHRdt7bjmGcPTAmzhSxRDPCRBG0pWo48_Qjk-Pbrc-fNfeA'; //jigarashah.50webs.com
var scriptTag=document.createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.src='http://www.google.com/uds/api?file=uds.js&v=0.1&key=' + key ;
var myElement = document.getElementsByTagName("head")[0];
//alert(myElement);
/* this statement causes IE crash */
myElement.appendChild(scriptTag);
}



http://jigarashah.50webs.com/googleHead.html

Second one does work :)



putGoogleSearchscript();

function putGoogleSearchscript() {
var key = 'ABQIAAAAnm6m31gbt_LgIZtU-_qGiBSzw8s6-P8gHRdt7bjmGcPTAmzhSxRDPCRBG0pWo48_Qjk-Pbrc-fNfeA'; //jigarashah.50webs.com
var scriptTag=document.createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.src='http://www.google.com/uds/api?file=uds.js&v=0.1&key=' + key ;
var myElement = document.getElementsByTagName("head")[0];
alert(myElement);
/* this statement causes IE crash */
myElement.appendChild(scriptTag);
}


http://jigarashah.50webs.com/googleHead2.html

Its really strange.

jscheuer1
01-22-2007, 06:06 AM
That probably means that IE just needs time to find and load something(s). A properly placed time out might take care of it.

Twey
01-22-2007, 06:09 AM
Yes, I've encountered this before. Don't think we managed to find a workaround, though.

jigarshah
01-22-2007, 06:16 AM
@jscheuer1

okay that makes sense. but how do i put timeout ? and why it hangs IE for that matter ? This sample code does not; but actual implementation which same as this(js method is exactly same). does hang IE. for reference
http://jigarashah.50webs.com/

CAUTION :: IT WILL HANG IE

jscheuer1
01-22-2007, 06:46 AM
In IE 7 this is where the error seems to come from:


function myOnLoad() {
// Create a search control
var searchControl = new GSearchControl();

// Add in a full set of searchers
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());

// Set the Local Search center point
localSearch.setCenterPoint("New York, NY");

// Tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));

// Execute an inital search
searchControl.execute("Google");
}

So, I would suggest this:


function myOnLoad() {
if(typeof GSearchControl=='undefined'){
setTimeout("myOnLoad()", 300);
return;
}
// Create a search control
var searchControl = new GSearchControl();

// Add in a full set of searchers
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());

// Set the Local Search center point
localSearch.setCenterPoint("New York, NY");

// Tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));

// Execute an inital search
searchControl.execute("Google");
}

jigarshah
01-22-2007, 07:25 AM
@John
It does not display any thing :) I think i will have to keep retrying after timeout ...or something else ?

jscheuer1
01-22-2007, 07:59 AM
I see you have the time out set to 0, that isn't enough time. Try increasing it, not decreasing it, eventually it should work but, might not. I notice that if I use the back and forward buttons, it then does display. I'm not sure if there is any way we can take advantage of this fact though. There are some things that can be tried but, I'd want to see the results of a longer time out, like 3000, first.

jscheuer1
01-22-2007, 08:12 AM
Another thing, this is just plain invalid (or should be and, I have seen IE have problems with this sort of syntax when it is expecting a normal close tag for an element):


<div id="searchcontrol"/>

It should be:


<div id="searchcontrol"></div>

jigarshah
01-22-2007, 09:03 AM
ok, Actually when u looked at the code i was just experimenting with it. :)
Now i have set timeout to 3000. but does not display anything.
Yes. Back and forward does display.

have looked at actual implementation ? u can try with Firefox and look at js source. Its exactly same. Why it hangs IE? Its fine even if does not display tht search part. But it should not hang browser.

Thanks a lot ...i got lots clarity about implementation.
What i should do to check my javascript is cross browser? is there any validator kind reference ? Or just hit and try with other browsers ?

Twey
01-22-2007, 02:25 PM
this is just plain invalidIn HTML. It's no problem in XHTML, but unfortunately XHTML can't render XHTML.
Why it hangs IE?This is a bug in IE. There is nothing technically wrong with your code. Try asking the Microsoft support forum for a workaround.

jscheuer1
01-22-2007, 04:39 PM
I did a search on:

GSearchControl undefined

using Google but didn't find anything particularly useful, some ideas though, as mentioned below. Perhaps something it turned up would make more sense to you than it did to me.

If it were me, I would try the page as DOCTYPE HTML 4.01 transitional and make sure that all of the HTML code was implemented, not just implied and that it validated. I would also use just a plain:

<html>

opening tag after the DOCTYPE. With all of that, it might work without any changes to the script(s).

Also, if there is a more basic version of this script that uses GSearchControl but that doesn't display so much stuff at first, I would try implementing that as well. If that loads and uses the GSearchControl function, you could devise a poll or other method to check for its successful implementation and then implement your more complex version after that.

Another avenue to test would be:


<body onload="setTimeout('myOnLoad()',3000);">