Rails spinoffs - Jan 2007 - IE thinks $() ain't the same as document.getElementById()

Rails Spinoffers:

Steps to reproduce the bug:

Save this in "outer.html":

<div id=''updateMe''></div>
<iframe src=''inner.html''/>

Now save this into "inner.html":

<input type=''button'' value=''control''
    onclick="window.parent.location.href        
&quot;javascript:void(document.getElementById(''updateMe'').innerHTML
= ''control'')&quot;"/>

<script src="/javascripts/prototype.js?1168956448"
type="text/javascript"></script>

<input type=''button'' value=''experiment''
    onclick="window.parent.location.href        
&quot;javascript:void($(''updateMe'').innerHTML =
''experiment'')&quot;"/>

Surf Internet Explorer (7 BTW) to outer.html, and observe two buttons.

Click ''control'', and observe that the outer.html''s
div updates to ''control''.

Observed behavior:

Click ''experiment'', and observe a null-object crash. $() could
not
find the same value as getElementById().

Expected behavior:

Because the javascript:void trick evaluates in the context of the
target frame (not the source frame), the behaviors of $() and
getElementById() should be exactly the same inside the
javascript:void() line as inside the target frame, right?

-- 
  Phlip
  http://c2.com/cgi/wiki?ZeekLand  <-- NOT a blog!!

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Phlip wrote:
> Rails Spinoffers:
>
> Steps to reproduce the bug:
This does not show a bug.  It shows that if you call a function that is
out of scope, you''ll get an error.

>
> Save this in "outer.html":
>
> <div id=''updateMe''></div>
> <iframe src=''inner.html''/>
>
> Now save this into "inner.html":
>
> <input type=''button'' value=''control''
>     onclick="window.parent.location.href >        
&quot;javascript:void(document.getElementById(''updateMe'').innerHTML
> = ''control'')&quot;"/>
Why you are using the javascript pseudo-protocol to execute script
commands plumb evades me.  Why not:

   onclick
"window.parent.document.getElementById(''updateMe'').innerHTML
''control'';">

> <script src="/javascripts/prototype.js?1168956448"
> type="text/javascript"></script>

If you are going to call Prototype.js functions in the *parent* window,
then you''d better make them available in the parent window, not in the
iFrame window.  Each has a separate global object and scope.

Incidentally, $() is not a replacement for document.getElementById.  It
is a way of ensuring that the object used is a Prototype DOM object,
not a plain DOM object.

[...]
> Observed behaviour:
>
> Click ''experiment'', and observe a null-object crash. $()
could not
> find the same value as getElementById().
The error is because $ is not defined - Firefox reports "$ is not
defined", IE shows "object expected" coming from outer.html.
>
> Expected behavior:
>
> Because the javascript:void trick evaluates in the context of the
> target frame (not the source frame), the behaviors of $() and
> getElementById() should be exactly the same inside the
> javascript:void() line as inside the target frame, right?
No.  You call:

   parent.window.location.href = "javascript:<script commands>";

Therefore the value of the parent window''s location.href property is
set to the *string* value assigned.  The javascript pseudo-protocol
causes the *string* to be executed in the context of that window.

QED.

Move (or copy) the script element that loads the Prototype.js file into
the parent window and the mystery is solved.


-- 
Rob


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

> > <script src="/javascripts/prototype.js?1168956448"
> > type="text/javascript"></script>
I should have put that in outer.html, and should have added the server
to the URI.

There is a more complex situation, with all the correct scopes and
such, that fails, and I did not give myself long enough to reproduce
it before posting. Yes, an inner.html calls an outer one with the href
= javascript:void() trick, and yes everything works fine on Firefox
and others.

Thanks for all the wondrous flames - I will remember in future that I
can draw fire for casually referring to something as a "cross-post"
when the actual cross-post mechanism is unavailable...)

(Except maybe RobG thinks Rails-Spinoffs has some reason to be politer
than news:comp.lang.javascript )

-- 
  Phlip
  http://c2.com/cgi/wiki?ZeekLand  <-- NOT a blog!!

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---