Executing JavaScript Inserted via .innerHTML

ZildjianB

Hi All,

I hope you can help me with this, as I have done some exhaustive
searching over the past couple days and cannot find a solution.

What I am trying to do is dynamically update an image and image map on
a page. I'd like the update to happen as quickly as possible and be
done without refreshing the page. The catch is that the image map uses
the wz_tooltip.js (http://www.walterzorn.com/tooltip/tooltip_e.htm)
library to display a JavaScript tooltip containing detailed information
about different areas of the image. So, when I pass the required
<script> tags via .innerHTML, the browser treats it as text and does
not interpret the JavaScript and execute the code.

My code looks something like this:

function flipImage(imgDiv, imgSrc, imgMap, ttDiv)
{
//generate random num for unique image map name
var rand = Math.round(Math.random() * 10000);
//create unique image map name
var imgMapName = "mapper" + rand.toString();
//piece together image map text
imgMap = "<map NAME='" + imgMapName + "'>" + imgMap + "</map>";

//write new image map
document.getElementById(imgDiv).innerHTML = imgMap;
//flip the image
document.flowview.src = imgSrc;
//link image to new image map
document.flowview.useMap = "#" + imgMapName;

var tooltip = '<script language="javascript" type="text/javascript"
src="/javascript/wz_tooltip.js"><\/script>';
//write <script> call wz_tooltip.js to create tooltips
document.getElementById(ttDiv).innerHTML = tooltip;
}

Martin Honnen

Zi*******@gmail.com wrote:

var tooltip = '<script language="javascript" type="text/javascript"
src="/javascript/wz_tooltip.js"><\/script>';
//write <script> call wz_tooltip.js to create tooltips
document.getElementById(ttDiv).innerHTML = tooltip;

You can try
var scriptElement = document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.src = '/javascript/wz_tooltip.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(scriptElement);
}
That should work to load that script file dynamically although I am not
sure why you would want to do that each time that flipImage function is
called.

And browsers usually had troubles implementing dynamic script loading
with the DOM so depending on the browser version it might not work.
Should work in IE 5/Win and later, Firefox 1.0 and later, Mozilla 1.4
and later, Opera 8.0 and later, Safari 2.0 and later, but I can't give
the exact versions of each browser where that was implemented.

--

Martin Honnen
http://JavaScript.FAQTs.com/

ZildjianB

Thanks, Martin. I have tried something similar to that in the past,
but I will give your variation a try. BTW... I'm developing using
Firefox 1.0.7 right now.

The reason the script file is loaded every time the image is flipped is
because it writes out new JavaScript tooltip code for each new image
map in the new image. Because of this, I have to add the <script> call
below any of the JavaScript tooltips in the document's body. Would it
be a problem if I used 'appendChild' in the body instead of the head?
Would this cause the entire page to reload? Thanks again for your help.

ZildjianB

Incase I wasn't 100% clear on how wz_tooltip.js generates the
JavaScript tooltip code for each tooltip, here is a simple example:

tooltiptest.html code:

<html>
<head>
<title>Tooltip Test Page</title>
</head>
<body>
<A HREF=# onmouseover="return escape('This is a Test')">TOOLTIP TEST
LINK</A>

<script language="JavaScript" type="text/javascript"
src="wz_tooltip.js"></script>
</body>
</html>
When run in Firefox 1.0.7 turns into:
<html><head><title>Tooltip Test Page</title></head>
<body>
<a href="#" onmouseover="return escape('This is a Test')">TOOLTIP
TEST LINK</a>

<script language="JavaScript" type="text/javascript"
src="wz_tooltip.js"></script><div id="tOoLtIp00" style="position:
absolute; z-index: 1010; width: 300px; opacity: 1; visibility: hidden;
left: -300px; top: -22px;"><table style="background: rgb(0, 51, 153)
none repeat scroll 0%; -moz-background-clip: initial;
-moz-background-origin: initial; -moz-background-inline-policy:
initial;" bgcolor="#003399" border="0" cellpadding="0" cellspacing="0"
width="300"><tbody><tr><td><table border="0" cellpadding="3"
cellspacing="1" width="100%"><tbody><tr><td style="padding: 3px;
text-align: left;" align="left" bgcolor="#e6ecff"><font style="color:
rgb(0, 0, 102); font-family: arial,helvetica,sans-serif; font-size:
11px; font-weight: normal;" color="#000066"
face="arial,helvetica,sans-serif">This is a
Test</font></td></tr></tbody></table></td></tr></tbody></table></div>
</body></html>

Martin Honnen

Zi*******@gmail.com wrote:

The reason the script file is loaded every time the image is flipped is
because it writes out new JavaScript tooltip code for each new image
map in the new image.

Don't expect to be able to use document.write after the page has been
loaded and have that insert stuff into the current document, a
document.write call after the document has been loaded will overwrite
the existing document.
But I don't understand why you would have to load a static script file
each time a function is called, load that script file once and put
functions in there that can be called to do what you want, then your
function flipImage does not have to load a script file but can simply
call a function already loaded to do whatever is needed (e.g. insert
some elements for a tooltip).
--

Martin Honnen
http://JavaScript.FAQTs.com/

ZildjianB

OK, I go it to work... I just had to cheat a little bit, but this
implementation works fine for now.

The script file was loaded whenever an image flip occurred because it
was not a static file. Instead, it set several variables, ran a
tt_Init() function, and wrote the code needed for the JavaScript
tooltips whereever it was included in a document. As Martin said, when
an image flip occurred after the page had finished loaded, the
document.write would cause the page to reload and overwrite itself.

To fix this, I edited wz_tooltip.js and replaced this:
document.write(htm);

With this:
document.getElementById(ttDiv).innerHTML = htm;

And then changed by flipImage() function to the following:
function flipImage(imgDiv, imgSrc, imgMap)
{
//generate random num for unique image map name
var rand = Math.round(Math.random() * 10000);
//create unique image map name
var imgMapName = "mapper" + rand.toString();
//piece together image map text
imgMap = "<map NAME='" + imgMapName + "'>" + imgMap + "</map>";

//write new image map
document.getElementById(imgDiv).innerHTML = imgMap;
//flip the image
document.flowview.src = imgSrc;
//link image to new image map
document.flowview.useMap = "#" + imgMapName;
tt_Init();
}

So now, instead of wz_tooltip's tt_Init() using document.write, I just
have it overwriting its JavaScript tooltip code in a div within the
document whenever an image flip occurs.

Executing JavaScript Inserted via .innerHTML

This discussion thread is closed

Similar topics

Question stats

	Ask Question
Home Questions Articles Browse Topics Latest Top Members FAQ