Jump to content

Opening Multiple Windows, One At A Time, Using One Function


Elemental

Recommended Posts

Hello Folks, I've learned how to open a browser window using JavaScript, I know it's about time, isn't it?, and maybe I should knowthe answer to my question by now also but I don't, so...I've been working with the following script:

function open_win(){window.open('documentName.html','_blank','toolbar=no,location=no,directories=no,status=no,statusbar=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=360,height=360,screenX=300,screenY=400,top=300,left=400');}

with the following html

<a href="documentName.html" onclick="open_win(); return false">Open Window</a>

This works fine even if JavaScript is disabled but I can only open the same document.Then I found how to use an argument, yeah baby I'm rocking now!:

function open_win(my_Doc){window.open('my_Doc','_blank','toolbar=no,location=no,directories=no,status=no,statusbar=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=360,height=360,screenX=300,screenY=400,top=300,left=400');}

with the following html

<a href="java script: void(0);" onclick="open_win('documentName.html'); return false">Open Window</a>

but if JavaScript is disabled you can click on "Open Window" all day for whatever good it'll do you.So... How do I combine the two and have the best of both worlds, One Script that I can use to open many windows?Can one of you "JavaScript Gurus" point me to where I can learn to do this, even if it's giving me the right search termfor what I want to do so I know what to search for, you know Google it? Peace,Elemental

Link to comment
Share on other sites

If you add the href back, you can also write your code so that it can apply to any link, have it just grab whatever is in the href:open_win(this.href);
Deirdre's Dad and justsomeguy, thank you both for your replies, much appreciated, however...I was originally working with the following code:
function open_win(){window.open('documentName.html','newwindow','toolbar=no,location=no,directories=no,status=no,statusbar=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=360,height=360,screenX=300,screenY=400,top=300,left=400');}

and then calling it like this:

<a href="documentName.html", target="_blank" onclick="open_win(this.href); return false"><img src="testimonials/FSC/annikaText.jpg" /></a>

This worked beautifully, I don't even need the open_win(this.href) but I would have to write one for each file I wanted to open.I remember, justsomeguy, had mentioned the open_win(this.href) in a previous post so I started to play around with that but I'm missing something, I'm not understanding something, because the attributes are not being called.If I remove the URL attribute from the window_open() function and change nothing else the new window opens where and at the size it should but it's a blank window. Am I missing an argument that I need to pass to where the URL attribute was?Sorry about the dead brain cells guys, "I just ain't getting it". Could you please shed a little more light on the subject or direct me to where I can get the "Javascript for dummies, idiots and dead brain cell people's 00001, step-by-step, I'll hold your hand, manual'?.... Did I miss anyone, other than me? ....Peace,Elemental

Link to comment
Share on other sites

It's more helpful if you post the exact code that doesn't work.The following is what I played with earlier today, before I posted. It works. It also incorporates jsg's suggestion, which I didn't mention the first time around because I didn't want to swamp you. But here it is. (The line breaks will have to be fixed, maybe, but other than that . . .)

<script type="text/javascript">   function open_win(my_Doc)   {	  window.open(my_Doc,'_blank','toolbar=no,location=no,directories=no,status=no,statusbar=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=360,height=360,screenX=300,screenY=400,top=300,left=400');   }</script><a href="http://www.google.com" onclick="open_win(this.href); return false">Open Window</a>

Link to comment
Share on other sites

It's more helpful if you post the exact code that doesn't work.The following is what I played with earlier today, before I posted. It works. It also incorporates jsg's suggestion, which I didn't mention the first time around because I didn't want to swamp you. But here it is. (The line breaks will have to be fixed, maybe, but other than that . . .)
<script type="text/javascript">   function open_win(my_Doc)   {	  window.open(my_Doc,'_blank','toolbar=no,location=no,directories=no,status=no,statusbar=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=360,height=360,screenX=300,screenY=400,top=300,left=400');   }</script><a href="http://www.google.com" onclick="open_win(this.href); return false">Open Window</a>

Deirdre's Dad,Thank you again, and yes, I should have posted what wasn't working those are the missing brain cells I mentioned, the past has a way of catching up..In your first post you said to put back the url href attribute and remove the ' ' from the window_open(my_Doc,...) which I did but it still didn't work for me, however; after seeing your code I'm thinking tha I may have removed the my_Doc from the function call as well.I guess I'm not understanding the relationship between the argument used in the actual function open_win(my_Doc) and the actual call of open_win(this.href). I think I get the "this" reference and if I add the href it more accurately defines the current url within the string???It would seem, to me then, that any text could be used in constructing the function since I wont be actually using it within the call, so why then does it not work when both the function open_win() and the window_open(' ',....) attribute are both empty?know of any "simple" explanation can read somewhere?Peace,Elemental
Link to comment
Share on other sites

In this context, this refers to the <a> element, so this.href refers to the URL that is defined in the href attribute inside the <a> tag.It's not about accuracy, really. On the other hand, if you create 10 <a> elements like this one, and you did that using copy and paste, you'd appreciate only having to change the URL once, not twice.Where it's most helpful is when you define click handlers in your script, instead of your tag. It gives you the option of writing more generic functions. (So for you, nothing to worry about right now.)I'm afraid I don't understand your last question. Is the code I posted not working somehow?

Link to comment
Share on other sites

In this context, this refers to the <a> element, so this.href refers to the URL that is defined in the href attribute inside the <a> tag.It's not about accuracy, really. On the other hand, if you create 10 <a> elements like this one, and you did that using copy and paste, you'd appreciate only having to change the URL once, not twice.Where it's most helpful is when you define click handlers in your script, instead of your tag. It gives you the option of writing more generic functions. (So for you, nothing to worry about right now.)I'm afraid I don't understand your last question. Is the code I posted not working somehow?
Deirdre's Dad, No sir, your example worked brilliantly.If you're referring to this:
"It would seem, to me then, that any text could be used in constructing the function since I wont be actually using it within the call, so why then does it not work when both the function open_win() and the window_open(' ',....) attribute are both empty?know of any "simple" explanation I can read somewhere?"
The argument used in the "function open_win(my_Doc)" and passed to the "window_open(my_Doc,'_blank',........)" is not referenced in the actual call of "open_win(this.href)", how this works, the relationship, isn't clear to me, yet; I'm sure I'm probably staring right at the answer but...I started to read The JavaScript Bible, and yes I've read the W3Schools' tutorials, several times; it's around the third or fourth time that half of my brain starts with the "I told you those cells would come in handy but no, you wouldn't listen", sometimes it's like having Cheech and Chong in my head and although it's funny, unfortunately they were both, well you know.In my attempt at humor I was asking if you knew where I could find a "simpler" explanation to better understand this relationship.I'll keep reading, I know I'll have a ureka moment, I usually do.Peace, and thank you again.ElementalPS: I'm loving your new avatar's guys (Deirdre's Dad and Justsomeguy)
Link to comment
Share on other sites

It might help if we looked at the best-practice way of assigning event handlers to page elements. Look at the following. It has the same result as your code. (I've shortened the window.open call so the code is easier to read):

<script type="text/javascript">   function open_win()   {	  window.open(this.href);	  return false;   }   function initializeEventHandler ()   {	  var el = document.getElementById("google_link");	  el.onclick = open_win; // missing parentheses is correct here;   }   window.onload = initializeEventHandler;</script><a href="http://www.google.com" id="google_link">Open Window</a>

Things to notice here.1. We have explicitly assigned the open_win function to a property of your link called onclick. It's hard to see that this is what happens when you put actual javascript in quotation marks inside your link tag, but it is basically the same. Your link is an object. Like all objects, it has properties and methods. By assigning a function to an object, you are assigning a method to the object.Or to put this another way, when you assign any property to an object, the object becomes the parent of the property.2. in open_win, we refer to this. this is a reserved keyword that always means the same thing: it is the parent of a property or method. In different scopes, it means different things. Most of the time, it refers to the document's window object. But when a function has been assigned to an object, if the word this is used in the function, it refers to the function's parent object.In your case, the parent of open_win is now the link object, so this refers to the link itself. Since the link has an href property, we can access the value of that property through this.href.3. An advantage of this is that open_win can be assigned to the onclick property of an indefinite number of objects and never has to be changed. this will always refer to the element that triggered the event.4. Because of the way this operates, this has a special use in object constructors. Consider:

function Person (n, a) {   this.name = n;   this.age = a;   this.insurance = "Allstate";}var mike = new Person ("Mike", 42);alert (mike.age);// "42"alert (mike.insurance);// "Allstate"

In the Person function, this is a shorthand way of referring to the object that is being created by Person. Person does not need to know that the object being created is identified by mike. The this keywords allows Person to create an indefinite number of Person objects.this is useful because it allows functions to perform in a highly generic way. A function does not need to know in advance how an object or page element is identified. It does not need an explicit reference to an object or element. Used correctly, this is a kind of universal reference.

Link to comment
Share on other sites

Using this. also means multiple functions can use the same variable names, but they won't conflict because of how this. scopes. Like DD said, it scopes to the parent object of the function, so it will only refer to that object. Maybe a bit more info, but using this. is a good practice to use as you start expanding your knowledge in the world of scripting.

Link to comment
Share on other sites

Deirdre's Dad, Thank you for taking the time to explain it so clearly, and for further explaining the use of "this"However, just so I'm clear in my understanding; I hope you can understand my explanation...In your example the "onclick" event assigned to a link (href), who's id value is "google_link", will open a new browser window. The var el (Variable el) points to the elements id with the value of "google_link"

var el = document.getElementById("google_link");

The el.onclick = open_win; says if a link element with the id of "google_link" is clicked-on execute the following fubctionThe function says, if a link element is clicked-on (this.href),

window.open(this.href); // opens the link (this.href) defined by the id name, in our case google.com 	  return false; // open said link in a new browser window

If you understand my explanation, Am I in the ball park?If so, then am I also in the ball park by thinking that this function will execute only for a link element with the id of "google_link" as defined by the initializeEventHandler function?"function initializeEventHandler () .... getElementById("google_link")"Peace,Elemental

Link to comment
Share on other sites

Using this. also means multiple functions can use the same variable names, but they won't conflict because of how this. scopes. Like DD said, it scopes to the parent object of the function, so it will only refer to that object. Maybe a bit more info, but using this. is a good practice to use as you start expanding your knowledge in the world of scripting.
thescientist,Thank you, I appreciate your input on this as wellAnd yes, I can see how the use of this, locally within a function, would allow for multiple same name variables through-out the script.Peace,Elemental
Link to comment
Share on other sites

Your explanation is spot on.The initializeEventHandler demonstrates one way to bind a page element object to an event handler function. I kept it simple for the purpose of clarity, so, yes, all it does is make an explicit connection between the "google_link" anchor and the open_win function. So for a simple illustration, we seem to have a lot of code to do one simple thing.A more sophisticated function would initialize every element on your page that needs an event handler. Let's say you had a whole bunch of links, like this:

<div id="links">   <a href="http://www.google.com">Google</a>   <a href="http://www.microsoft.com">Microsoft</a>   <a href="http://www.mozilla.com">Mozilla</a>   <a href="http://www.w3schools.com">w3schools</a>   <a href="http://www.php.net/">php.net/</a></div>

Now we'll run a modified version of initializeEventHandler. Notice how the first line "chains" objects and methods to keep it tidy:

function initializeEventHandlers (){   var links = document.getElementById("links").getElementsByTagName('a');   var len = links.length;   for (var i = 0; i < len; ++i) {	  links[i].onclick = open_win;   }}window.onload = initializeEventHandlers;

Instead of explicitly assigning open_win to the onclick handler of each link individually, knowing their id attributes in advance, we treat them as a collection. The this keyword allows the function to handle an indefinite number of objects without really knowing what they are. We could add a dozen links to the "links" div and initializeEventHandlers would not need to be updated. That is the true beauty of generic code, and concepts like this help make code like this possible.

Link to comment
Share on other sites

Deirdre's Dad,AWESOME!!!!Thank You soooooo much, I can easily see how all that's needed now is the open window function with the this.href and the other attributes to make your script quite powerful.You've given me quite a bit to look at and learn from, and I'm grateful. Aside from clearly explaining my original post you've used a "for loop" on this last example and that's something I've been avoiding. I've scanned over the "for loops" explanation but I knew, at some point, I'd have to really sit and read up on them if I was going to learn JavaScript. Now, with your example and explanation of how the links are all "linked" together I think I'll get a better grasp on them.I have to admit that I still find the scripting part of all this a bit daunting. I'm much better off than when I started of course, I can at least look at a JavaScript script and figure out some of what it's doing but still…Thank you again for all your help and patience.Peace,Elemental

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...