#256 unable to redraw dynlayer object in another frame (IE 6.0)

[ksj]

layer2 is a dynlayer object which is already a children of
dynlayer object layer1. The following redraw logic does
not work in IE 6.0

layer2.removeFromParent();
layer1.addChild(layer2);

Below is the error message:

Line: 51
Char: 4
Error: invalid argument
Code: 0
URL: http://127.0.0.1/test.html

[Andrew Gillett]

Logged In: YES
user_id=134108

I haven't been able to reproduce this error. My test case is
http://dynapi.sourceforge.net/releases/dynapi3x/test/006.Redraw.html

Can you supply the complete code for your example that fails?

Logged In: YES
user_id=706287

Also, let us know what specific version of DynAPI you are
using. I did not see the problem with dynapi-3.0.0-beta2.
So provide a complete example of the failure, and the DynAPI
version you're using.

[ksj]

Complete source code to reproduce the problem

[ksj]

Logged In: YES
user_id=1335843

First, thanks a lot for checking this problem.

Your test code does work. To reproduce my problem, please
unzip my attached file and put it in "test" folder under the
dynapi's "examples" folder. "desktop.html" is the entrance
page. Please follow steps below to see the problem:

==========================================
Problem for IE6:

Step 1: browse page: "desktop.html" and remember what's in
the the lower frame of the screen.

Step 2: click "Set Desktop" button to redraw the lower frame
of the screen. You can see how the yellow layer and blue
layer disappear.

==========================================
BTW, I just found another problem for the same code when
running it in firefox 1.0.1. Below are the steps to reproduce
the problem:

Step 1: browse page: "desktop.html" and remember what's in
the upper frame of the screen.

Step 2: click the browser's "reload" button to refresh the page.
You'll see that "toolbar1" disappears

[ksj]

Logged In: YES
user_id=1335843

Still does not work for me - sorry I submitted "Works For Me"
by mistake

Logged In: YES
user_id=706287

Hi. It was Andrew (agillett) who changed Resolution to
Works for Me, before the example was supplied. Now I see
the problem as you describe.

========
In Firefox, if reload, I get this error in the JavaScript
console:

Error: this.parent.menu.OnLoadDesktop is not a function
Source File:
file:///path/to/dynapi-3.0.0-beta2/examples/test/content.html
Line: 22

If I then hold Shift and reload, I get this JavaScript error:

Error: this.parent.menu.OnUnloadDesktop is not a function

But the page loads properly otherwise.

This indicates that something is being destroyed and then
trying to use it after it's gone.

========
In IE 6, on pressing Set Desktop, I get a different error
from the one reported. In an alert-style popup, in addition
to the script error popup:

An error has occured in this dialog.

Error: 84
Unspecified error.

And the odd thing, the IE script error popup has no content:

Line:
Char:
Error:
Code:
URL:

But clicking "OK" on the alert-style popup closes the IE
script error popup as well.

Reloading the page AFTER clicking Set Desktop yields the
following script error:

Line: 198
Char: 19
Error: Can't execute code from a freed script
Code: 0
URL: file:///path/to/dynapi-3.0.0-beta2/examples/test/menu.html

Followed by:

Line: 22
Char: 4
Error: Object doesn't support this property or method
Code: 0
URL:
file:///path/to/dynapi-3.0.0-beta2/examples/test/content.html

Then the page reloads just fine.

I'll have to look into it some more.

[Andrew Gillett]

Logged In: YES
user_id=134108

The first thing I've noticed is that menu.html contains two
different definitions of the "OnLoadDesktop()" function.
This makes it hard to follow the logic. Would you mind
correcting this?

[ksj]

Logged In: YES
user_id=1335843

Sure, please correct - I put two copies of the same function
by mistake. Thanks

[Andrew Gillett]

Logged In: YES
user_id=134108

They are not two copies of the same function, they are two
different functions with the same name:

// redraw desktop content
function OnLoadDesktop(){
desktopContents.removeFromParent();
desktop.addChild(desktopContents);
};

// show cached desktop content
function OnLoadDesktop(){
desktop = this.parent.desktop.content;
desktop.addChild(desktopContents);
};

I don't know how to correct this, you must do it.

[ksj]

Logged In: YES
user_id=1335843

Please remove the first one (listed below). Thanks
// redraw desktop content
function OnLoadDesktop(){
desktopContents.removeFromParent();
desktop.addChild(desktopContents);
};

[Andrew Gillett]

Logged In: YES
user_id=134108

The removeFromParent() function deletes the DIV element
associated with the DynLayer from the DOM. The addChild()
function creates a new element and inserts it into the
parents (layer1) DOM.

The problem is that the _create() function in dynlayer_ie.js
uses "document.createElement()" to create the new DIV
element. Because this action is initiated from your "Set
Desktop" button, the "document" variable refers to the menu
document, not the content document. You cannot add an
element created in one frame to the DOM of another frame.

One workaround is to remove the "if" statement on line 16 of
dynlayer_ie.js so that lines 17-18 are executed instead of
the "else" block (lines 21-50). This avoids using the
document.createElement function altogether and your code
seems to work.

However I'm not sure that is this is a good long term
solution. I've tried to get the code to use the parent
elements document object to create the new element, but that
has always failed with permission errors.

Another solution is to just stop using frames :)

[ksj]

Logged In: YES
user_id=1335843

Thanks a lot, Andrew.
I feel like being executed. But I do see how it's getting tricky
when you try to control the contents of another window.
Question is: Can be fixed theoretically? Will the dynapi
development group formally abandon supporting frames?

Logged In: YES
user_id=706287

I don't think it's up to the dynapi. JavaScript can only do
what the browser allows. If the browser does not allow it,
we can't do anything.

On the other hand, we /may/ be able to look at what the
functions are doing and devise a way to achieve what we want.

[ksj]

Logged In: YES
user_id=1335843

It seems to me that we run into a problem caused by
using "global variables" in a set of APIs that try to achieve
OO programming in javascript environment.

I think if dynapi users stick to dynapi objects, as in my
example code, the application should behave in a way that
OO programmers expect -- certainly, only if that's possible
within the limitation of browsers.

[Doug Melvin]

Logged In: YES
user_id=184788

My two cents:
If the frames are on seperate domains (or different ip
address) then no.. there is no easy fix. This is called
cors-site scripting and is delibratly disabled for obvious
security reasons.

Now that said and idea comes to mind.. how about passing
dynapi calls between the two frames via our handy-dandy soap
objects?

It's no small project, and one which I certainly do not have
time for atm. (16 hour days make Douggie a very sad man indeed)

breif outline:
A method by which fram/window A on domain Y may execute or
cause to be executed javascript code in fram/window B on
domain Z.

This method would involve window A sending a message server
Y which serrver Y would relay to Server Z which in turn
would relay said message to window B.

Even as i type this i see how there would be a certainly
level of complexity in implementation, However, I can also
see how such an interface and be abstracted and made
"simple" for the end-using coder.

All I can say now is "Viva La eval()!"

[ksj]

Logged In: YES
user_id=1335843

I successfully tested the fix provided by agillett (posted on
date: 2005-09-01 08:04) - which mean that there might be a
quicky but not necessarily dirty solution. Interestingly, the
problem seems to be solved by just using the two lines of
code in dynlayer_ie.js (line 17 -18, listed below) all the time:

----------------------------------------------------------------------------
parentElement.insertAdjacentHTML
("beforeEnd",this.getOuterHTML());
elm = parentElement.children
[parentElement.children.length-1];
---------------------------------------------------------------------------

instead of using the 27-line section (line 22-48, listed below)
which is considered more effecient for ie5+

--------------------------------------------------------------------------
// this method is more
efficient for ie5+. any comment?

elm=document.createElement\('DIV'\);
        elm.id=this.id;
        if\(this.\_className\)

elm.className=this._className;
if(!this._noStyle) {
var css =
elm.style;
css.position=
(this._position||'absolute');
css.pixelLeft=
(this.x||0);
css.pixelTop=
(this.y||0);
if(this.w!=null)
css.width = this.w;
if(this.h!=null)
css.height = this.h;

css.backgroundColor=\(this.bgColor||'transparent'\);
            css.zIndex=

(this.z||1);
css.cursor=
(this._cursor||'auto');
css.overflow=
(this._overflow||'');
if(this.bgImage!
=null) css.backgroundImage='url('+this.bgImage+')';
if
(this.bgImage==null && this.html==null)
css.backgroundImage='none';
if (this.clip)
css.clip='rect('+this.clip[0]+'px '+this.clip[1]+'px '+this.clip[2]
+'px '+this.clip[3]+'px)';
else if (this.w!
=null && this.h!=null) css.clip='rect
(0px '+this.w+'px '+this.h+'px 0px)';
css.visibility=
(this.visible==false)? 'hidden':'inherit';
// border - set by
BorderManager
if
(this._cssBorTop){

css.borderTop = this.\_cssBorTop||'';

css.borderRight = this.\_cssBorRight||'';

css.borderBottom = this.\_cssBorBottom||'';

css.borderLeft = this.\_cssBorLeft||'';
            \}

----------------------------------------------------------------------------

Can anybody shed some light on why the second section is
better than the first section for ie5+? Can it be enhanced to
gain the benefit of the first section where no "global variable"
is used? Thanks