Re: How to make injected js execute?

Hi Peter,

Thanks for that - I had no idea this would be a complex issue. A couple of
observations:

1. for (possibly demented) reasons of my own it's actually an arbitrary mix
of js and html that I want to inject into the page, so of the 5 methods
offered in the other thread:

* Change Source- attempts to change the .src property of a script element.
* Change innerHMTL - inserts a script string via innerHTML.
* createElement - uses createElement to create a script block with a .src
attribute.
* Change .text - changes the .text property of a script element.
* createTextNode - creates the text part of a script element using
createTextNode

.... I think only the .innerHTML one is an option for me.

2. A lot of the thread you referred me to is about IE, whereas my observed
issue affects Firefox too.

My fingers are still crossed that there's an answer to this for me, but hope
is ebbing away fast...

Cheers,

JON

On Aug 20, 2:20 am, "Jon Maz" <jon... (AT) surfeu (DOT) deno.spam> wrote:

1. for (possibly demented) reasons of my own it's actually an arbitrary mix
of js and html that I want to inject into the page, so of the 5 methods
offered in the other thread:

* Change Source- attempts to change the .src property of a script element.
* Change innerHMTL - inserts a script string via innerHTML.
* createElement - uses createElement to create a script block with a .src
attribute.
* Change .text - changes the .text property of a script element.
* createTextNode - creates the text part of a script element using
createTextNode

... I think only the .innerHTML one is an option for me.

2. A lot of the thread you referred me to is about IE, whereas my observed
issue affects Firefox too.

My fingers are still crossed that there's an answer to this for me, but hope
is ebbing away fast...

I wrote a library that does what you want to do...sort of.

<URL: http://forkjavascript.org/mutate/docs>

What my script does it scan through the HTML that is about to be
inserted and pluck out all the script bits. It inserts the other HTML
and then process the JavaScript bits. Instead of dynamic script
insertion, as Randy has investigated, I just eval() the script bits.
This is more cross-browser but has scope implications.

If you are in control of writing the JavaScript bits then you can just
write the JavaScript bits so there are no problems with using eval().
There is only one little complication and it is with naming global
variables explicitly as global properties instead. Here is the
pertinent part of the above page regarding this issue.

<blockquote>
The main issue is the scope of entities (eg. variables or functions)
defined in the evaluated script. Because the call to eval() occurs
inside a JavaScript function, entities defined in the evaluated script
may not persist after eval() returns. If you do want to define global
entities you may look at writing something like the following snip
inside the code block.

window.foo = 2; // instead of var foo = 2
</blockquote>

If you are not in charge of the script bits and want to use script
insertion you could combine my library and one of the solutions posted
in the other c.l.j thread about script insertion.

Peter

Peter Michaux said the following on 8/20/2007 11:55 AM:

On Aug 20, 2:20 am, "Jon Maz" <jon... (AT) surfeu (DOT) deno.spam> wrote:
1. for (possibly demented) reasons of my own it's actually an arbitrary mix
of js and html that I want to inject into the page, so of the 5 methods
offered in the other thread:

* Change Source- attempts to change the .src property of a script element.
* Change innerHMTL - inserts a script string via innerHTML.
* createElement - uses createElement to create a script block with a .src
attribute.
* Change .text - changes the .text property of a script element.
* createTextNode - creates the text part of a script element using
createTextNode

... I think only the .innerHTML one is an option for me.

2. A lot of the thread you referred me to is about IE, whereas my observed
issue affects Firefox too.

My fingers are still crossed that there's an answer to this for me, but hope
is ebbing away fast...


I wrote a library that does what you want to do...sort of.

URL: http://forkjavascript.org/mutate/docs

What my script does it scan through the HTML that is about to be
inserted and pluck out all the script bits. It inserts the other HTML
and then process the JavaScript bits. Instead of dynamic script
insertion, as Randy has investigated, I just eval() the script bits.
This is more cross-browser but has scope implications.

I have a script somewhere that lets you simply insert it via innerHTML
and then reads the script blocks back out and executes them. Is that
what yours does? (I haven't looked at it).

If you are in control of writing the JavaScript bits then you can just
write the JavaScript bits so there are no problems with using eval().
There is only one little complication and it is with naming global
variables explicitly as global properties instead. Here is the
pertinent part of the above page regarding this issue.

The other problem that can come up is if your scripts contain a
document.write statement :-)

blockquote
The main issue is the scope of entities (eg. variables or functions)
defined in the evaluated script. Because the call to eval() occurs
inside a JavaScript function, entities defined in the evaluated script
may not persist after eval() returns. If you do want to define global
entities you may look at writing something like the following snip
inside the code block.

window.foo = 2; // instead of var foo = 2
/blockquote

If you are not in charge of the script bits and want to use script
insertion you could combine my library and one of the solutions posted
in the other c.l.j thread about script insertion.

I have yet to see a solution that handles document.write but I have an
idea in mind for it.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

On Aug 20, 5:22 pm, Randy Webb <HikksNotAtH... (AT) aol (DOT) com> wrote:

Peter Michaux said the following on 8/20/2007 11:55 AM:
URL:http://forkjavascript.org/mutate/docs

What my script does it scan through the HTML that is about to be
inserted and pluck out all the script bits. It inserts the other HTML
and then process the JavaScript bits. Instead of dynamic script
insertion, as Randy has investigated, I just eval() the script bits.
This is more cross-browser but has scope implications.

I have a script somewhere that lets you simply insert it via innerHTML
and then reads the script blocks back out and executes them. Is that
what yours does? (I haven't looked at it).

I extract the scripts from the HTML before inserting the HTML into the
page. That way if some browser starts to automatically evaluate
scripts when they are inserted by innerHTML I'm not screwed. There
already is one old browser out there that does this: NN6? Then after
inserting the HTML, I eval() the script bits in order. There are pros
and cons for just about every decisions in dealing with this stuff. I
find the system I built easy to use.

There is a bit more too it then that. My script takes into account
problems with inserting table rows or tbody elements by "parsing" the
html first in the appropriate surrounding element. There are
assumptions about a well formed html fragment. blah blah blah. That
script was actually a fun project.

If you are not in charge of the script bits and want to use script
insertion you could combine my library and one of the solutions posted
in the other c.l.j thread about script insertion.

I have yet to see a solution that handles document.write but I have an
idea in mind for it.

You are obsessed! Just curious but when is it that you are wanting to
do script insertion with totally random scripts you haven't written
yourself or written by a coworker? Just academic interest?

Peter

Jon Maz said the following on 8/20/2007 5:20 AM:

Hi Peter,

Thanks for that - I had no idea this would be a complex issue. A couple of
observations:

1. for (possibly demented) reasons of my own it's actually an arbitrary mix
of js and html that I want to inject into the page, so of the 5 methods
offered in the other thread:

* Change Source- attempts to change the .src property of a script element.
* Change innerHMTL - inserts a script string via innerHTML.
* createElement - uses createElement to create a script block with a .src
attribute.
* Change .text - changes the .text property of a script element.
* createTextNode - creates the text part of a script element using
createTextNode

... I think only the .innerHTML one is an option for me.

The thread that Peter sent you to isn't the best thread for what you are
trying to do. There is another one in the archives if I can find it.

<URL:
http://groups.google.com/group/comp.lang.javascript/search?group=comp.lang.javascript&q=loadHTMLFragme nt>

The name of the function that was last written for what you are doing is
named loadHTMLFragment and looks like this:

function loadHTMLFragment(elemId, HTMLFragment)
{
if (document &&
document.getElementById &&
document.getElementById(elemId) &&
document.createElement &&
document.appendChild &&
document.getElementsByTagName)
{
var el = document.getElementById(elemId);
el.innerHTML = "&nbsp;" + HTMLFragment;
//The &nbsp; is a hack to cause IE to process the
//script elements if the first node in the
//HTMLFragment is a script element.

var d =el.getElementsByTagName('script');
var t = d.length;
for (var x=0;x<t;x++)
{
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.text = d[x].text;
el.appendChild(newScript);
}
for (var y=0;y<t;y++)
{
el.removeChild(el.getElementsByTagName("script")[y]);
}
}
}

The comment you see about IE is because there is a bug in IE where if
the first element in the innerHTML is a script element then it won't
execute that script block for you for some odd ball reason. The simplest
solution was to blanket insert a blank space and avoid the issue all
together.

It still has issues with potential scope issues, and with document.write
issues. If any of your script blocks have a document.write in it then it
will fubar your page by replacing it. I have some ideas on ways around
it but haven't fooled with it in a few months. Maybe this will push me
to get around to it. The basic idea is to scan the script blocks, find
document.write lines and try to figure out how to go about inserting
whatever it was trying to write. Even that has issues with it.

2. A lot of the thread you referred me to is about IE, whereas my observed
issue affects Firefox too.

Your issue affects any browser other than NS6.1x, NS6.2x, iCab3.0.3 Mac,
IE5.2 Mac as they are the only ones that will execute scripts inserted
via innerHTML (unless there is one that I don't know about). If you find
a browser other than those above that will execute scripts inserted via
innerHTML, please let me know.

My fingers are still crossed that there's an answer to this for me, but hope
is ebbing away fast...

There is an answer, and your hope can ebb higher. Search the archives
for - script insertion randy webb - and you can find more information
about what you are trying to do than I care to sit and type out again.

The biggest thing is whether you control (in any manner) the HTML/Script
you are inserting into your page. If you do, and plan it properly,
script insertion becomes almost trivial.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Peter Michaux said the following on 8/20/2007 8:43 PM:

On Aug 20, 5:22 pm, Randy Webb <HikksNotAtH... (AT) aol (DOT) com> wrote:
Peter Michaux said the following on 8/20/2007 11:55 AM:
URL:http://forkjavascript.org/mutate/docs
What my script does it scan through the HTML that is about to be
inserted and pluck out all the script bits. It inserts the other HTML
and then process the JavaScript bits. Instead of dynamic script
insertion, as Randy has investigated, I just eval() the script bits.
This is more cross-browser but has scope implications.
I have a script somewhere that lets you simply insert it via innerHTML
and then reads the script blocks back out and executes them. Is that
what yours does? (I haven't looked at it).

I extract the scripts from the HTML before inserting the HTML into the
page. That way if some browser starts to automatically evaluate
scripts when they are inserted by innerHTML I'm not screwed. There
already is one old browser out there that does this: NN6? Then after
inserting the HTML, I eval() the script bits in order. There are pros
and cons for just about every decisions in dealing with this stuff. I
find the system I built easy to use.

NN6.1, NN6.2, iCab3 and IE5.2/Mac execute scripts inserted via
innerHMTL. Detecting that behavior is trivial though. Use the onload
event, insert something like this via innerHTML:

<script type="text/javascript">
someBooleanVariable = false;
</script>

And have this already in the page:
<script type="text/javascript">
someBooleanVariable = true;
</script>

And then have your function check that variable:

function doSomethingWithThatAwfulCode(){
if(someBooleanVariable){return}
}

Then, if they get executed previously you know not to fool with them
again, you simply return out of the function.

There is a bit more too it then that. My script takes into account
problems with inserting table rows or tbody elements by "parsing" the
html first in the appropriate surrounding element. There are
assumptions about a well formed html fragment. blah blah blah. That
script was actually a fun project.

I have never been one to try to dynamically create tables on the fly.
Most of my interest in it is the fact that IE gets it right and FF gets
it wrong. The personal page I was working on when I first started
playing with HikkScript (JS on the fly) used tables but I haven't fooled
with it in about 5 years or so. Can you imagine trying to reverse a
script that document.writes embedded tables though?

Note: I have decided to start calling this HikkScript just for the sake
of it and make it easier to find in the archives. It has a certain
"personal ring" to it

If you are not in charge of the script bits and want to use script
insertion you could combine my library and one of the solutions posted
in the other c.l.j thread about script insertion.
I have yet to see a solution that handles document.write but I have an
idea in mind for it.

You are obsessed!

That's what they tell me. A "This attitude plus FAQ mantainer: a true
humanitarian!" is what one poster here said about me when I said I
wanted to be ahead of the game on this one (You can find that in the
createTextNode IE7 thread).

Just curious but when is it that you are wanting to
do script insertion with totally random scripts you haven't written
yourself or written by a coworker?

Personally? I don't. It comes up mostly from ill-fated "Ajax sites"
where people don't re-do the back end to make it ajax friendly and just
retrieve complete pages and want to insert it. Then they can say "Yeah,
we use AJAX on our site" without taking advantage of the main advantage
of AJAX.

Just academic interest?

Mostly, as anybody that is trying to insert HTML with document.writes in
it has more problems than trying to get the document.write to work right
as they need to change the back end to get rid of the document.write
statements.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Randy Webb said the following on 8/20/2007 8:46 PM:

Jon Maz said the following on 8/20/2007 5:20 AM:
Hi Peter,

Thanks for that - I had no idea this would be a complex issue. A
couple of observations:

1. for (possibly demented) reasons of my own it's actually an
arbitrary mix of js and html that I want to inject into the page, so
of the 5 methods offered in the other thread:

* Change Source- attempts to change the .src property of a script
element.
* Change innerHMTL - inserts a script string via innerHTML.
* createElement - uses createElement to create a script block with a
.src attribute.
* Change .text - changes the .text property of a script element.
* createTextNode - creates the text part of a script element using
createTextNode

... I think only the .innerHTML one is an option for me.

The thread that Peter sent you to isn't the best thread for what you are
trying to do. There is another one in the archives if I can find it.

URL:
http://groups.google.com/group/comp....HTMLFragme nt


The name of the function that was last written for what you are doing is
named loadHTMLFragment and looks like this:

I have revised that function to accommodate NN6.1/NN6.2Win and hopefully
it will accommodate the innerHTML mac browsers (iCab and IE). If anyone
could test it on a non-windows browser I would be grateful. Added was
the innerHTML testing so that browsers that execute innerHTML scripts
wouldn't execute them twice.

var innerHTMLFailed=true;
window.onload = checkIt;

function checkIt(){
document.getElementById('myDiv').innerHTML = '<script
type="text/javascript">var innerHTMLFailed = false;<\/script>'
}
function loadHTMLFragment(elemId, HTMLFragment)
{
if (document &&
document.getElementById &&
document.getElementById(elemId) &&
document.createElement &&
document.appendChild &&
document.getElementsByTagName &&
{
var el = document.getElementById(elemId);
el.innerHTML = "&nbsp;" + HTMLFragment;
//The &nbsp; is a hack to cause IE to process the
//script elements if the first node in the
//HTMLFragment is a script element.
if(innerHTMLFailed)
{
var d =el.getElementsByTagName('script');
var t = d.length;
for (var x=0;x<t;x++)
{
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.text = d[x].text;
el.appendChild(newScript);
}
for (var y=0;y<t;y++)
{
el.removeChild(el.getElementsByTagName("script")[y]);
}
}
}
}

Next step is a test of the .text attribute since I know of browsers that
do not support setting the .text property of a newScript element.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

<quote>
You are obsessed! Just curious but when is it that you are wanting to
do script insertion with totally random scripts you haven't written
yourself or written by a coworker? Just academic interest?
</quote>

For myself I am trying to write code that asynchronously injects adverts
into a web page. You'll notice across the web millions of sites whose pages
might be quite fast-loading in themselves, but with 3 or 4 massive delays as
the page goes to ads.domain.com to fetch the ad code, which
characteristically is a mix of javascript and html, and is generated by 3rd
party software.

I want this external data injected in the background, after the main page
has finished rendering, for an improved user experience. Make sense?

JON

Hi Peter,

Currently http://forkjavascript.org/mutate/docs is down. A temporary issue?

JON

On Aug 21, 3:25 am, "Jon Maz" <jon... (AT) surfeu (DOT) deno.spam> wrote:

Hi Peter,

Currentlyhttp://forkjavascript.org/mutate/docsis down. A temporary issue?

Unfortunately it is down. I'm trying to get my hosting company to tell
me what's up. Hopefully it will be back up today.

Peter