?
Solved

How to track page loading progress in a child window from JavaScript in the parent window?

Posted on 2003-04-01
8
Medium Priority
?
500 Views
Last Modified: 2007-12-19
I am opening a child window from JavaScript located in the parent window, and I need to know when the loading of the child window has started. I have no control over the code in the child window, so I cannot make changes there. I have full control over code in the parent window that contains the JavaScript.

Here is code that I have used (it sort of works, but it just starts a page load in the child window once per second based on an array of URLs). What I need to know definitively is when the child window has started loading (because at that point, the URL of the child window will be written into the browser history, which is my only goal in opening the child window). Even a simple test that tells me when, say, more than 100 bytes have loaded into the child window would probably do the trick.

<head>....
function OpenLinkWindow() {
primitiveString = String(document.links[i]);
if((primitiveString.indexOf("/messages/")) != -1)
{
window.open(document.links[i],"linkWindow",windowprops,false);
now = new Date();
initTime = now.getTime();
delayTime = 1000;
for (wasteTime=initTime; wasteTime<(initTime+delayTime); wasteTime++) {
now = new Date();
wasteTime = now.getTime();
status = i+"/"+(document.links.length)+"  "+primitiveString;
}
}
}

function LinkList() {
windowprops = "menubars=yes,location=yes,toolbars=yes,scrollbars=yes,resizable=yes,"+"width=350,height=400,top=50,left=50";
self.name = "main";
for (i=0; i<document.links.length; i++) {OpenLinkWindow();}
alert("Close all windows and restart Internet Explorer");
}
</head>

<body>...
<a href="javascript:LinkList();">Mark all Postings as 'Visited'</a>
</body>

As you can likely tell from my code, I have just started teaching myself JavaScript (thank you David Flannagan) and my code probably leaves a lot to be desired.

If anyone knows how I can do this, I would be very appreciative.
Thanks for your help.
Al Gordon



0
Comment
Question by:Al_Gordon
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 8246622
You have very little hope on this if you have no control of code on the pages in the child.

You need to be able to reference the child, so open it this way:
x=window.open(document.links[i],"linkWindow",windowprops,false);
x is now a handle to reference the child.  The only way you are going to be able to determine if the loading has started is if youcan reference something in the page.  using: if (x.document.variable) will return true if the variable named exists in the child, but that means you have to know somthing about the page.  You could also try if(x.document.body) or some other dom reference to test if it exists.  However I think there is probably one problem you will not be able to overcome.  If these page are not from the same domain as the parent, then you cannot refrence anything on them because built in security prevents it.

Cd&
0
 

Author Comment

by:Al_Gordon
ID: 8247020
Thank you, COBOLdinosaur! Based on your suggestion, I think the news is good, because:

1. All the links are to pages in the same domain; and
2. All the pages start with the same identifiable HTML code.

It looks to me like your idea of searching in 'x.document.body' to see if any predictable text has yet been loaded would be the answer.

As a beginner (1 week) in JavaScript, I am not sure how I would insert that logic into my JavaScript code. I assume I would:
1) initialize 'x' to some empty state,
2) execute 'x=window.open(document.links[i],"linkWindow",windowprops,false);', and
3) loop until known text at the start of the loading document (for example, "<head>") shows up. When the text appears, I would know that loading has started, and I could exit the loop.
4) Finally, I could embed this logic within the existing longer timeout in case some page is not there.

Am I on the right track? Could you offer any advice as to how this logic would be inserted into my code?

Thanks again,
Al Gordon


0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 1000 total points
ID: 8247422
initalize x=false;
then the window open as you have it

You can't really look for specific text.  you have to test for the existence of an object.

If you have a JavaScript variable or function in the head of the pages that is the easiest to test with:

if (x.varname) or if(x.function())

If a variable named varname exists then that test will return true and you can break out of the loop.

The other way is to test for the existence of something in the document object. if(x.document.body) will be true if the body tag has been created.

A better way is to test for the DOM method which should exist as soon as loading starts:

if (x.document.getElmentById())

That will be returned true as soon as the page start to load because when the browser is instantiated it will have all the methods immediately

Cd&
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Expert Comment

by:pinnacle71
ID: 8247605
If all you care about is adding a URL to the history, why not check window.history.length before and after the window.open?
0
 

Author Comment

by:Al_Gordon
ID: 8251024
COBOLdinosaur & pinnacle71,

Thanks for the ideas. I have been working on them for the past couple of hours, and I hope to get back to you tomorrow, either with a successful outcome or more questions.

One problem with using history.length is that if I am trying to load a page that is already in history, then length will not increment, and I will get stuck waiting for an increase in length. I guess I could also use timeout for those situations.

For some reason, history.length always remained stuck at 2, no matter how many entries there were in history.

Looking at another method based on COBOLd's suggestion, I ran into the following problem:

The following script worked:
tagExists = false;
if((childWindow.document.getElementsByTagName("input")[0])) tagExists = true;
status = i+"/"+(document.links.length)+"  "+primitiveString+"  TagExists="+tagExists;

But the following script caused a script error when run:
while((childWindow.document.getElementsByTagName("input")[0])) == null)
{status = i+"/"+(document.links.length)+"  "+primitiveString;}

Why does 'if' work but 'while' does not? I may have a syntax problem. Any ideas?

Thanks again,
Al Gordon
0
 

Author Comment

by:Al_Gordon
ID: 8253700
It works! Your suggestions pointed me in the right direction. Monitoring history.length was a good idea, but there were the problems I mentioned above. So the points go to COBOLdinosaur!

The code seems to be 100% reliable, and even uses a timeout to handle links that are corrupted or zero length.

This whole thing forced me to learn a lot about JavaScript and IE. Maybe I'll be able to offer some help soon!

Here is the code:


<head)...
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function OpenLinkWindow() { //Open the next link in 'messages' subdirectory
primitiveString = String(document.links[i]);
if((primitiveString.indexOf("/messages/")) != -1) //Only visit links in 'messages' subdirectory
{
childWindow = window.open(document.links[i],"linkWindow",windowprops,false); //Open link in childWindow
status = i+"/"+(document.links.length)+"  "+primitiveString; //Update browser status line for info only
now = new Date(); //Set timeout in case linked page is corrupted or zero length (and hence no tag found)
initTime = now.getTime();
delayTime = 5000; //Set timeout to 5 seconds
for (wasteTime=initTime; wasteTime<(initTime+delayTime); wasteTime++) {
now = new Date();
wasteTime = now.getTime();
if((childWindow.document.getElementsByTagName("hr")[0]) != null) break; //If valid tag found in childWindow, then page has started to load
}
childWindow.document.write("<html>Another posting marked as Visited!</html>");  //Clear last link out of childWindow
}
}

function LinkList() { //Open all postings in childWindow to mark them as Visited
windowprops = "menubars=no,location=yes,toolbars=no,scrollbars=no,resizable=nos,"+"width=500,height=200,top=50,left=50";
for (i=0; i<document.links.length; i++) {OpenLinkWindow();}
childWindow.close(); //Finished. Close childWindow, leave parent window open.
alert("Finished! Reload page in browser."); //Finished! Alert the user.
}

//  End -->
</script>    
</head>

<body>...
<a href="javascript:LinkList();">Mark all Postings Visited</a> (Internet Explorer only - runs for several minutes)
</body>
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 8253776
Glad we could help.  Thanks for the A. :^)

Cd&
0
 

Author Comment

by:Al_Gordon
ID: 8254637
If you would like to see the code in action, you can visit:
http://www.islet.org/forum/wwwboard.htm

Scroll to the bottom of the page where you will find the link "Mark all postings as Visited".

As you will see, this is a charitable medical foundation, so it was great to get the economical advice.

Thanks again,
Al Gordon
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question