We Keep Coding

How to get reference to a pop up window and load a javascript file in it?

In SharePoint 2010, there is a button to open a popup window (its for alerts). However it doesn't use the conventional way to open a popup window like window.open, it calls a SharePoint function, which results in a pop up window opening. Now is there a way I can load a JavaScript file (.js file using a script tag basically) in it? I figure I would need to get a reference to that window somehow, and then append a script tag in it or something.
Note: I can't modify the actual file popup window page. I just want to dynamically insert the JavaScript in it programmatically.

It depends on how the SharePoint function opens the window. Unless it opens it as an assignment to a variable you can access for reference, then there's no way to access it. Chances are you are going to need to modify the SharePoint function to do this and return that reference or else make it a globally scoped variable you can then reference. Also, the target window will have to be the same domain as the parent page.

Accessing DOM inside popup.Is this possible if the pages are on different servers?

Hey I am trying to open a popup in a page and access the DOM in the opened popup from JavaScript in opener page. However I was unable to do so.
I am doing
myWindow=window.open(url,'','width=200,height=100');
then trying to access body of the popup as
myWindow.document.body
I am getting undefined for that.
Note the popup being opened is in another server from the opener page.
Is it me doing something wrong or is it impossible to do so?

colorbox refreshing parent window without closing popup

I am using colorbox for showing pop ups. Is this possible to reload parent window without closing pop. I mean I want to do actions/events in the pop up and the changes should be displayed at parent window.
Thanks

You can definitely play with the elements in the page from within the colorbox. You can't, however, "refresh the parent window" as you stated in the question title, because then you will also lose the colorbox (which is a part of that page).
But judging from the rest of your question, you simply want to make changes in the page. If your colorbox is not in an iframe (e.g., you have not explicity set the option iframe:true) then it's pretty straightforward. Just create event handlers that are called from actions performed in the colorbox.
If you are setting the colorbox to open an iframe, there's a couple things to be aware of:
The iframe page (the contents of your colorbox) must be within the same domain
Use the parent. in the iframe's JS that references the parent page
Here's an example of the colorbox code you would have in the iframe page:
$(document).ready(function() {
$("a.internalColorboxLink").click(function() {
parent.$("body").append(
parent.$("<div/>").text("MY NEW TEXT")
);
});
});
In fact, this is the almost the same code as would be in the inline colorbox (that is, the js in the parent page). Simply remove the parent references.
I can post more concrete examples if you update your question with exactly what you want to do.

How to Show the Pop up in iframe outside?

I have one page(say jobs.html) with an iframe loads another page( say joblist.html).There is one another popup(which displays description of job when clicks one title) which is generated with javascript will be load into the page in iframe when it loads.
I have to load the popup(job description popup) outside the iframe.
Any solution to get the jobs.html page's document body using javascript?
or How can i get this popup outside the iframe?
Thanks,

You can use the parent function.
You can define the function of showing the popup on the parent page. not in iFrame and call that function from iFrame.
Lets suppose you have a function of showing job description in Parent page.
var showJobDesc = function(jobTitle,jobDesc,...){
....
}
now in iFrame call this function like;
parent.showJobDesc(jobTitlem, jobDesc, ...);
By doing this you have no issues for placement/alignment of the Dialog.

I have to load the popup(job description popup) outside the iframe
What do you mean when you say load the popup outside the iframe?
If you want to open the other page in a pop up, use window.open
If you want to open the new page replacing the parent's page, use the location of the window
window.parent.location.href = "newPage.html"
In general, you can refer to the parent window (the window containing the iframe), use window.parent (and therefore the parent window's document as window.parent.document, and any script in the parent window as window.parent.scriptName)

Put the show javascript into container page, and in the iframe just call parent.showpopup().

parent.showpopup() throws an access denied error. Kinda makes sense since including an iframe means the developer of the page can control the page it's contained in.

Javascript and CSS Popups

I've got a question about CSS based popup windows, like those generated by jQuery UI's dialog system, or Colorbox. If I use those (or something like them) to open a popup window to an HTML page and that page has Javascript in it, does the Javascript in the popup window run in its own context, or does it become part of the context of the Javascript in the parent window that opened it? I ask so that I can write the Javascript on both pages (parent and popup) so there is no namespace collision.
Thanks in advance!
Doug

That depends on the type of popup. (I'm assuming we are talking about in-page popups here and not window.open() ones that open a new browser window.)
If it contains an IFRAME in which you load a separate page, then that page will have its own styles. You will have to re-load any CSS and JavaScript files you need.
If it doesn't contain an IFRAME, but just a regular DIV or other element into which content is loaded through AJAX (or directly output in the "parent" HTML page) then the popup will run in the context of the parent page.

If you use real popups (new windows) it is definitly in its own context.
If you use modal windows purely in HTML it depends. It can be an iframe (own context) or injected elements (parent context).

With Colorbox, you can set the iframe property to true and it will load the content in an iframe. This gives the page its own scope. If you don't use an iframe, then the page will be loaded in the context of the current document.
$('a.someLink').colorbox({ href:"somePage.html", iframe: true });