Popup Window similar to Modal Window - javascript

I need to open a popup Window to a cross domain content. I should not allow the user either to access or close the parent window, till i am done with Child window.
The main issue with Modal window is that stops any asynchrnous process running on the main window. For example, timers and auto refresh wont be working in the parent window.
Is there any perfect way to do the above said.
Thanks in advance

How about instead of popping up an actual window, you just open a pseudo-window...that is a div with some borders, make it draggable if you want, and place a large semi-transparent div that covers the rest of the page and blocks it from being clicked on. Basically do something like how Lightbox works

You could use a fake window built via javascript. Several widget libraries have support for this. For example, see ExtJS, which also supports modal windows but it might be overkill for your application. For jQuery, browse through the plugins, like this one

I think Telerik has a control for this if you are working on ASP.Net. Uses a div in its implementation as #Davr suggested. Modal windows are a bad option anyhow as they are not supported on all browsers.

In addition to what Davr and thoriann said, you will likely need to make an Ajax call to grab the content. Since Ajax calls via the browser enforce the same-domain policy, you will need to make an Ajax call to your OWN server, which in-turn will need to make an xmlhttp sever-to-server request to grab the content the third-party server.

I feel the above answers wont fit for the following reasons..
JasonS Solution - The application is developed on J2EE technologies.
Other's solution - Some of the the URL Launched in the child window will communicate to the parent window through standard APIs. If i am using div or other in-built plug-in windows, then those javascript API will fail.

Check out the Jquery plug in "BlockUI". When BlockUI is called the parent window is not accessable. You can do what you want on the modal then call "UnblockUI" to close the popup and give parent control again.
Pete

Related

How to open a url in an already existing browser tab?

I'd like to do the following in my application via javascript.
1) Press a button from a web page that opens a popup.
2) Select some options in the popup and accept them.
3) Change the content of what is in the first web page according to what has been selected in the popup and change it. A GET Request is acceptable, and if possible popup with the selected options should again be on top, either by putting it on top or by opening a new one with the same options chosen.
I think javascript must have some way of saving the name of the browser tabs your are opening and later, if you want, open a new URL, or put one over other but I cannot find them. The window.open options doesn't look like they can do this.
Any idea on how to achieve this thing? Thanks for your time.
You can try the window.opener method in the popup to access the main page. High level details here: http://www.w3schools.com/jsref/prop_win_opener.asp, but if you Google it there's examples.
We did this for a project and it works, with a few caveats:
Cross domain basically doesn't work, if you have multiple domains you have to get more creative.
Be careful cross browser as well, we had to add some custom javascript to handle
Basically, what you need to do on your main page is define a global javascript method that does what you want it to (it can take parameters). Then, on your popup, you can call it with window.opener.MethodNameHere();
Theoretically, if you do need to handle cross browser, you can try using postmessage, which I believe is only supported in html5 natively (there are plugins for html4), but it would probably be tricky getting it right in this circumstance and I'm not sure how to do it off the top of my head.

Setting the onload property of a child window

I have a parent opening a new window, and trying to detect when the child window has loaded. In Chrome, I've tried
open('http://www.google.com').onload = function() { alert(location.href); };
but that doesn't seem to work.
Why doesn't the above method work? Are there alternatives?
If you want to be absolutely certain that a page has loaded, you can use messaging.
If you are able to use HTML5, there is a new feature called web-messaging.
This works very well on cross domain sources.
If HTML5 is not an option, use JS instead. I used a simple jQuery plugin called: windowmsg. It has worked excellently for me. I'm really not sure about this working on a cross site environment, but I think it should.
Beware of the security issues that these kind of solutions offer.
The method as it is should work(and works for me), but not when opening a window with a document from a different domain.
For security-reasons the new window will not dispatch the load-event to a document from another domain.
Technically speaking the child window and parent window are two different instances of the browser. We call them as child window and parent window. They do not have access to each other.So its not possible to perform any action in one window on the click of HTML elements in second window.
So, I suggest that you should not open a new window if you need access. You can use fancybox or lightbox that is effectively a part of the same window and that, you have control.

programmatically click an input button in another web page?

I know there have been several similar questions, but I haven't seen an answer to my specific need: Is there a way to click a button in a separately launched web page? For example, I launch another web page via:
<a href="x" target="y"> or
window.open()
Can I then click an input button in that launched web page programmatically?
Unless the page is underneath your own control or resides on the same domain then no, it is not possible. This would be cross-site scripting and all browsers have security sandboxes in place to keep something like this from happening. Why are you trying to programmatically press a button on a page that you're also programmatically opening?
Yes. When you do window.open it will return you a window object. Var win = window.open(); win.fnSubmit(); assuming fnSubmit is the function on the other page that will do the.clicking. and both pqges on the same domain.
This is a technique used by some hacking injection attacks. Basically you can inject javascript into the querystring that can attach itself to the DOM, change an image or swf file source or simply run when the page is loaded; example here and example here.
Or if you already know the structure of the other page you can directly target methods or objects.
But as these are not nice things I assume that you have good reasons why you can't touch the code on the receiving page but want to adjust its behaviour?
You can click on any element you can select.
You can only select elements in windows that you have security privelages to.
You have rights to your own window, and rights to windows within the same domain & security.
To access the element you'll need the window object, which is returned from window.open
var newWin = window.open(siteYouHaveAccessTo);
newWin.document.getElementById('foo').click();
If you're trying to click on the Search button on www.google.com, you're SOL.
Survey says... maybe. If you've done your homework, you will probably be able to get communication to happen within the same subdomain. It gets progressively more difficult from there -- I've never had consistent cross-browser sub-domain support for manipulating JavaScript between two windows (or iframes).
That said, if they are the same domain, it is a matter of descending into it. If I have:
Window A opens Window B
Window B declares var winBVar
Window A is able to access winBVar after, and only after, that variable is declared (as in, you still need to wait for document.onload, etc)

how to make popup windows always on top?

I want to have a javascript/jQuery popup window (child page) that is always in front of the parent page, something like facebook's current picture viewing feature.
it would be closed by the user clicking on the close button.
I have tried as below:
mywindow = window.open ("DownloadForm.aspx", "mywindow","location=1,status=1,scrollbars=1, width=350,height=150");
mywindow.moveTo(350, 350);
this code successfully opened a child page in front of the parent page, but there is jQuery code ( $(#test).click() ) on the parent page which causes the parent page to always be in front.
I tried putting the window.open() code after $(#test).click(), but it didn't solve the problem.
The $(#test).click() is necessary, therefore I need to have a workaround.
I appreciate any help, thank you in advance.
myWindow.focus()
Many modern browsers prevent this from working, but it's the only way.
use following javascript code in the page you are opening in popup
<body onblur="self.focus();">
Im sure you cannot control the order of the window. Instead of a popup (which is often and usually blocked by browsers) why not investigate using a lightbox javascript plugin. They are usually free, stylish and work well.
Just set it from the modal css. The z-index is normally set to 1. Just change it to 9999. That is the purpose of the z-index, to set the popup top level.
If not using bootstrap popup, then you need to use css to set it. Browsers are not guaranteed to place nice with .focus() on a window.

What is it called when a popup appear "over" a wepage?

when you visit http://www.daniweb.com you get a popup window, what is this called + any idea how to do it?
Thank you for your reply, what is the simplest way to do have a modal loading animation only i.e. when page loads that animations shows and when done the animation goes? ASP.NET/Ajax
You'd call this a modal dialog, and you can implement one very easy with jquery ui:
http://jqueryui.com/demos/dialog/#modal
I like to refer to these windows as ANNOYING
The other name is some form of JS or JQuery.
Its called a javascript popup window.
Here's a link to show you how to open a js window
The way it looks though is they are using the modal popup extender provided by the ASP.net AJAX Control library. This can be simulated via JQuery as well.
It's called a modal dialog window. "Modal" meaning "mode" as in the UI has two modes, one where you can only interact with the dialog window, the other where there is no dialog window and you can interact with the rest of the page.
Probably looks something like a lightbox/thickbox .Showing some text/html instead of images
This is a modal pop up window, meaning you can't do anything else while that window is open.
Here are a bunch of ways to make them.
You can set up this kind of popup by having Javascript on the onload event create an overlay div that has height 100% and a higher z-index than the content, and also a div for the popup with position fixed and an even higher z-index. Then when the user clicks on close or otherwise it is time for the popup to go away, the Javascript can set display: none on these divs.
You can use Firebug (or IE Developer toolbar) to see the styles used on the example page you mentioned and use that as a model.
(Also they are annoying, but at least better than pop-unders, IMO ;-) )
Thats a modal dialog popup. Here's a nice jQuery version that I have used before.

Categories

Resources