I am using window.open to open a new window which will send some message to the parent window using window.opener.postMessage.
This child window URL is arbitrary. I mean there is a textbox where the users can give the URL and it will be opened using window.open.
Although the user is suspected to use the URLs that are supported, it is also possible that some random URL will be used. In this case, I don't want to child window to make any changes to the parent window, especially to the parent location.
How can I avoid this issue? I've tried to use noreferrer,noopener; however, that breaks entire cross-window communication altogether, which is not desired.
Related
I have a page with a few links.
Each link opens in a new tab.
The next time I click a given link, I want it to recall the same tab where it was previously opened.
Is it possible? How?
All pages come from the same domain.
I've seen this answer:
Check if my website is open in another tab
It seems possible to store the URIs in localStorage, for repetitions detection.
I think this technique will allow me to detect repetitions, but I can't figure out how to aim at the specific tab (activate it, bring it to the front).
I don't control the server, need to implement it in the client (via Tampermonkey).
For the curious, I work a lot with BitBucket issues.
The page with the links is the issues listing, the other pages are the individual issues.
I want to be protected from opening the same issue twice, update both versions, and have a data loss.
Additionally, each page can have two different URIs, one for viewing and the other for editing. But I think I can solve it with JS.
Recalling a Browser Tab by Name
You can first specify a name for each tab you create, by using window.open():
let newWindow = window.open(newUrl, newWindowName);
or by using target attribute in an anchor tag:
Make New Window
If you then call window.open with the name of an existing tab, that will use the existing tab. If the window by that name doesn't exist, window.open will create a new window (or tab).
MDN web docs page for Window.open
Bringing Window to the Front
Using window.open() alone may not be enough to bring the window to the front. That may be possible with a different function, window.focus(), which issues a request to bring the window to the front. Combining the two:
window.open(myUrl, myWindowName).focus();
Caution: A browser's user preference setting may still prevent focus() from bringing the window to the front, so this is not guaranteed to work. From MDN web docs:
It may fail due to user settings and the window isn't guaranteed to be frontmost before this method returns.
You can get the previous page's URL with the following:
let prevURL = document.referrer;
You can get the URLs from all open tabs with the windows.getAll() function.
From this answer - You cannot programmatically focus the browser to a specific tab due to security concerns. Consider updating the title to notify the user with document.title = {{new title}}
First I would like to say that I've been programming JavaScript for about 3 months now and also that I'm not very concerned with solving this problem by the standards or best practices. My main concern is learning to use the DOM. I don't want to use any jQuery because I'm not familiar with it.
I'm trying to make a non-profesional "login" function on my page, using JavaScript and the DOM. To begin with I was using "login" screen that would be displayed "hidden" initially and then be displayed "block" when in use. This worked fine and looked really good when I added a darkened screen behind the "login" screen by adding less opacity (0.1 opacity) to the main part of the page that's beneath the "login screen".
This (the opacity) would return to normal when I closed the "login" screen. So you can see all the stuff is happening within the same page using the same DOM. OK, this is how I wanted it to work: you create a username then you your create a password. Boom, finished!
But here's the problem: after you create a username and password I want it to say "Hello (username here)" where the login link initially was. I could just use the DOM and insert the username into the HTML page, but when I submit the form that is the login function the page gets reloaded and the changes to the DOM become erased!
So now I can tell you about the solution I thought of: make the form (login page) be in a new window, so when the form is submitted (and the DOM is manipulated) the new window is reloaded and then subsequently closes leaving the changes to the main pages DOM intact. Only problem is I can't figure out how to do this. You could probably say that's a major problem hahaha.
So, can I manipulate the parent windows (i.e. the calling window) DOM from the new window?
In response to your answer: you can modify the caller window's DOM by using window.opener.document from the new window;
window.opener is a reference to the caller window (if any, otherwise null), but only if both windows are from the same domain).
NOTE: Is it a small webpage or you are going to do a lot of DOM manipulation on a web site/application via javascript? In the later case you should use a javascript library/framework (I recommend jQuery) in order to do the dirty job more easily.
A popup window can find the window that opened it using the opener variable.
If both the popup window and the original window originate from the same domain, then the popup window can indeed modify the HTML of the original window.
If the popup window and the original window contain content from a different domain, then they can't see the HTML of each other - due to the cross-origin protection that browsers put in place.
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.
I'm building an app that involves authentication via third-party. To make the process not redirect the actual app I open a new window that then does the authentication and returns to main window after success.
This doesn't, however, go as well as planned. When the popup redirects to third-party and back, window.opener gets null. It's still possible to close the popup by window.close() but I also need to refresh the logged-in-area in the main window, like this:
window.opener.check_auth_status();
I really hope there is a way to fix this, e.g. binding a function to popup-close in the main window? Refreshing the whole page would be highly unnecessary.
One way is to set an interval to main window checking if the popup is closed, but this seems so fiddly.
You have a few options that may or may not work in the latest versions of the browsers due to security updates
1) check that the window is closed from the opener - not fiddly and actually the safest
2) give the opener a name
window.name="myMainWindow";
and in popup (script from SAME domain) - should normally not open a new window or change content
var handle = window.open("","myMainWindow");
handle.check_auth_status();
3) use an iFrame in the popup and when you want to access the opener, use top.opener
Normally when a window is opened using window.open I can access the caller window by using window.opener(), is it possible do the similar within modal dialogs(window.showModalDialog)?
As you can read in a comment on the MSDN page about showModalDialog (thanks to Pekka),
[t]he window.opener method returns
null, rather than a reference to the
opening window. So you cannot refresh
the opening window with
window.opener.location.refresh()
(if, for instance, you use
showModalDialog to open an editing
dialog). If all you want to do is
refresh the opening window every time
the ModalDialog closes, that is easy
(include window.location.refresh()
right after the call to
showModalDialog). But if you only
want to refresh the opening window in
certain cases (e.g., the opening
window takes a while to refresh), you
can do that by passing a
dialogArgument.
A more clever (I think) way is to
pass the window reference itself as the dialogArgument. In the
calling window, use
window.showModalDialog('newurl.asp',
window). In the called dialog
retrieve the reference with var
window_opener =
window.dialogArguments. You can use
the window reference stored in
variable window_opener in place of
window.opener, to refresh the
calling window from the called dialog.
Do note that Firefox and Chrome (for
instance) do not appear to have these
limitations, and appear to treat
ModalDialogs more like regular
windows. Keep that in mind if you do
testing using one of these browsers,
but intend your application to work in
all browsers.