[<?Wille?>]

Hi,

Im working on a intranet website and a few questions came to my head.

1. Is it possible to check if a frame is compleatly loaded (also cross domain)

2. Is it possible to have a floating element, eg. div, available to float above many frames instead of having to put the div into all frames.

im trying to emulate tabs, with all the most important tools loading directly in to the site. if a page thats focused is loading, i want to popup a div (not a new window) saying "please wait"

Currently the frameset looks like this:

Code:

     <frameset rows="24,*" border="0" framespacing="0">
  	 <frame src="tabs.php" name="tabs" id="tabs" scrolling="no" />
  	 <frameset cols="100%,0%,0%" name="contentframes" id="contentframes">
  	   <frame src="intra/index.php" name="INTRAMASTER" id="INTRAMASTER" onload="javascript:SwitchFrame(0);" />
  	   <frame src="http://site.from.same.domain.ext" name="RT" id="RT" />
  	   <frame src="http://site.from.external.domain.ext" name="PL" id="PL" />
  	 </frameset>
     </frameset>

The switchframe function basicly just resizes the frames, but clicking one link on in frame one opens a new page in frame two. Loading bar does not show becourse the top window never reloads, reson for the "loading" div.

Thanks in advance.

Regards.
William

[TwoD]

1. Yes, Internet Explorer has the readyState property for this. If it is set to "complete", everything should be loaded. Use it together with onReadyStateChange event to catch when a frame is done loading. I'm not sure this works in other browsers though. If not, you could perhaps use the onLoad event of the body tag to call a JavaScript function in the tabs frame.

2. I'm not sure about this. A regular div tag doesn't float outside the frame so it can't be made to show up no matter which frame is visible. The words "modular windows" comes up in my head but I've never used that myself... would probably get killed by popup blockers anyway.
Maybe you could place the "loading div" in the tabs frame instead?

I'm thinking that a small loadingScript.js file could be called from each one of your pages that load in the frames.
In the .js file, you set document.body.onload=doneLoading and create a function called doneLoading. In that function you use linkList=document.getElementsByTagName('a') to get a collection of all the links on the page. You give each link an onClick event by looping through them and doing [I]linkList.onclick=startLoading.
After that (still in the doneLoading function) you reference the tabs frame using window.parent.frames[0].getElementById('loadingDiv').style.display="none".
End of that function. Now to the startLoading function. Here you do the opposite: window.parent.frames[0].document.getElementById('loadingDiv').style.displ ay="block" to show the "loading div".

Add <script src="loadingScript.js"></script> to the pages that will be loaded into the frames. Also add a div tag with the id "loadingDiv" to the tabs frame.

Now, each link on your pages should automatically be given an event handler which pops up the loading div when clicked. And as soon as the new page is done loading, the div should disappear again thanks to the onload event handler.

Hope I didn't confuse you

[<?Wille?>]

Originally Posted by TwoD

1. Yes, Internet Explorer has the readyState property for this. If it is set to "complete", everything should be loaded. Use it together with onReadyStateChange event to catch when a frame is done loading. I'm not sure this works in other browsers though. If not, you could perhaps use the onLoad event of the body tag to call a JavaScript function in the tabs frame.

I tought those where only available for the XMLHttpRequest (or ActiveXObject on IE).
How should i point to the frame to be able to use thease?

<frame src="site.ext" name="RT" id="RT" onload="this.onReadyStateChange = WriteIT" />

function WriteIT() {
self.INTRAMASTER.document.getElementById('debug'). innerHTML += document.getElementById('RT').readyState+' ';
}

results in empty debug div and no errors (both FF and IE)

Originally Posted by TwoD

2. I'm not sure about this. A regular div tag doesn't float outside the frame so it can't be made to show up no matter which frame is visible. The words "modular windows" comes up in my head but I've never used that myself... would probably get killed by popup blockers anyway.
Maybe you could place the "loading div" in the tabs frame instead?

I'm thinking that a small loadingScript.js file could be called from each one of your pages that load in the frames.
In the .js file, you set document.body.onload=doneLoading and create a function called doneLoading. In that function you use linkList=document.getElementsByTagName('a') to get a collection of all the links on the page. You give each link an onClick event by looping through them and doing [i]linkList.onclick=startLoading.
After that (still in the doneLoading function) you reference the tabs frame using window.parent.frames[0].getElementById('loadingDiv').style.display="none".
End of that function. Now to the startLoading function. Here you do the opposite: window.parent.frames[0].document.getElementById('loadingDiv').style.displ ay="block" to show the "loading div".

Add <script src="loadingScript.js"></script> to the pages that will be loaded into the frames. Also add a div tag with the id "loadingDiv" to the tabs frame.

Now, each link on your pages should automatically be given an event handler which pops up the loading div when clicked. And as soon as the new page is done loading, the div should disappear again thanks to the onload event handler.

Hope I didn't confuse you

The problem here is the fact that i cant add anything to some of the sites im loading in to thease tabs.
Some are opensource with millions of templates (maby not millions but alot anyways), some closed. they are all tools which we eather own licenses to or opensource which dont require it.
Thats why i was looking for a solution that would not require this but seems like its not possible or not worth the ammount of job i have to put in to it.

I guess the few workers here that will be using this will have to just watch the cursor to know when its loading.

and a small note: The site "works" on both IE and FF, but for some reson IE doesint know how to render tables/divs.
The site is designed for FF, ill show you why
FF (1024x768)
http://img408.imageshack.us/my.php?image=ff2rb.jpg
IE (1280x1024)
http://img408.imageshack.us/my.php?image=ie2xc.jpg

The only width definitions on the page are Main table 100% and thease divs inside 50%.

Thanks for your reply tho

Regards.
William

[TwoD]

I placed this in the tabs page and it displays the readyState of the INTRAMASTER frame.
I made the mistake to use capital letters in onreadystatechange, sorry about that.

Code:

<script>
parent.frames['INTRAMASTER'].document.onreadystatechange=ShowState
function ShowState(f){
var targetFrame=parent.frames['INTRAMASTER']
	targetFrame.document.getElementById('debug').innerHTML+=targetFrame.document.readyState+"<br>"
}
</script>

You don't have to add the <script> tag to include a .js file manually on each of your pages.
Just make a reference to the body tag of the frame and append the tag using .innerHTML="<scr"+"ipt src='statechecker.js'></sc"+"ript>", or insertAdjacentHTML("beforeEnd","<scr"+"ipt src='statechecker.js'></sc"+"ript>") to make it standard DOM scripting, when the page is done loading.


EDIT: Just noticed that the onreadystatechange handler is removed when the page reloads since it is set by the tabs frame.
You'd have to add it each time the page is loaded, and the best way to do that is to include the .js file in the beginning of the page you're loading instead...

[<?Wille?>]

Originally Posted by TwoD

I placed this in the tabs page and it displays the readyState of the INTRAMASTER frame.
I made the mistake to use capital letters in onreadystatechange, sorry about that.

Code:

  <script>
  parent.frames['INTRAMASTER'].document.onreadystatechange=ShowState
  function ShowState(f){
  var targetFrame=parent.frames['INTRAMASTER']
  	targetFrame.document.getElementById('debug').innerHTML+=targetFrame.document.readyState+"<br>"
  }
  </script>

You don't have to add the <script> tag to include a .js file manually on each of your pages.
Just make a reference to the body tag of the frame and append the tag using .innerHTML="<scr"+"ipt src='statechecker.js'></sc"+"ript>", or insertAdjacentHTML("beforeEnd","<scr"+"ipt src='statechecker.js'></sc"+"ript>") to make it standard DOM scripting, when the page is done loading.


EDIT: Just noticed that the onreadystatechange handler is removed when the page reloads since it is set by the tabs frame.
You'd have to add it each time the page is loaded, and the best way to do that is to include the .js file in the beginning of the page you're loading instead...

few questions.
Doesint altering innerHTML of body tag with a single `=` replace all other content?
And a problem with this solution, some of the pages load from ourdomain.net are located at ourdomain.com. As far as i know altering content of a page from external domains is not allowed in javascript. Or thats atleast what FF Javascript debugger told me when i tryd a similar solution.

This really seems rather impossible to do with a floating window.
Ill just have to go with changing the text in tabs for the time of loading if i can get the readystatechange thingy to work.

Thanks for replying agian =)

e:
About that onreadystatechange handler. Does it sound ok if i have it in my tab switching function located in top?

[TwoD]

Yes, innerHTML works just like a variable in JavaScript, it should be +=.

Hmm, you're right, IE doesn't allow me to edit the contents either, strange really since I'm only altering the cached version on my harddisk. There's no way one could do permanent damage with JavaScript by altering HTML like that.

I guess you could grab the complete sourcecode of the external pages, store it in a variable, change the code there, and print it back out to a new internal page. But that would mean you ned to load each page twice, which is probably not acceptable.

You'd need to place the onreadystatechange code so it runs each time you load a page, preferanbly in the tabs frame since it has access to the other frames and is completely controlled by you.

I'm trying to think of ways to edit the external pages or fool the browser to think they're within the domain. But I can't come up with anything reliable except for the above way.