I'm trying to control one window from another in HTML5. I'd like it so when I open one window that I log into, and another window that I login to, then from one window I can click a button and something happens in the other window. I'm not sure where to start; can somebody point me in the right direction?
You don't need any HTML5-Features for that but you can easily do it with javascript:
myNewWindow = window.open() opens a new window and assigns a window-object of that new window to myNewWindow, so you can easily access the new window's DOM from the opening script, using the myNewWindow-variable.
It also works the other way: In a script in the new window, you can user window.opener to access the window-object and DOM of the opening window.
Just make sure, that the content of all your windows is loaded from same domain, as javascript does not allow you to control content loaded from another source (refer to "same origin policy" for more information on this topic).
This answer is 6 months late, but for the Googlers (like me):
I would recommend WebSockets for what you're trying to do Jonathan. WebSockets allow the server to broadcast data to any/all browser windows that are open for your page/site in realtime.
Browser support is currently quite poor but there are good shims to get it working across all browsers very efficiently. Socket.io is one such solution which I've used to great success.
Related
is it possible return focus on tab parent using javascript?
I read some threads about this problem, but i didn't find solutions.
I tried
window.opener.parent.focus()
and
window.opener.focus();
but it doesn't work.
Can someone help me?
Thanks
Generally, you cannot do this inside a web page. Because it's the user's choice which tab/window she wants to focus on and browsers such as firefox and chrome respect such choices by providing configs to open new tabs in the background or not. But under several very special cases, you may still achieve this.
If you want to open a new tab and return focus immediately, you can try to simulate a 'ctrl+click' event on a link to open the tab on the background. Refer to this thread Open a new tab in the background?(Only for chrome, API may already changed. So it may only works on an obsoleted version)
If you are shipping with an extension, do it in the extension code. For example: in chrome extension.
If your script is for a customized browsers which you have control on / you can affect the design, you can implement the function in the browser side and expose an API for your script.
Is it possible to fire events picked up by a separate browser window? With JavaScript perhaps.
i.e. if my website opened up another window to display summary product information, would it be possible to notify that window to update when a different product is selected in the main window?
Needs to work in IE, but doesn't need to work on Chrome or other browsers.
Use code like this:
Parent window
var func = function() {...}
child = window.open(...)
Child window
window.opener.func(); // Call function in parent window
You can also call function in the child window from the parent but there is one problem: You must wait until the child window has finished loading; window.open() is asynchronous.
More details: Accessing parent window from child window or vice versa using JavaScript
There are a couple of options.
Cross-Document-Messaging allows you to pass events between windows. For this to work, you need to have a handle of the target window, which you can really only acquire if the target is either an <iframe> (e.g. through window.frames, or window.parent from the iframe's POV) or if the target is a window opened by the current window through window.open() or window.opener from the popup's POV.
Shared Workers can connect otherwise unassociated windows much like Cross-Document-Messaging. Shared Workers are only available in Chrome and Safari, though.
Server-Sent Events could use the server to proxy the communication between your otherwise unassociated windows. This reqires a round-trip to the server (so is not entirely client-based) and is not available in Internet Explorer.
Web Sockets are an option, too. They too suffer from a server round trip and are not available in Internet Explorer. There is socket.io, which polyfills this functionality down to old Internet Explorers - so might be a viable solution.
A hacky solution is abusing LocalStorage. It'll work in modern Browsers and IE8.
jQuery BrowserEvent was something I played with way back when. It abuses the window.event and browsers' local storage capabilites to simulate passing events between browsers. This is nothing you'd want to use in a production environment, though.
German fellows may want to check out Kommunikations-APIs in HTML5 - Welche wann nutzen?
Yeah, that would be possible if the window with product information would be open using window.open method in parent window.
That way you can induce communication between those two (without, strictly speaking, events) but with some extra code that's possible.
How can I move my popup window back or minimize it? The following code snippet doesn't work:
w = window.open('asdasd');
w.blur();
window.focus();
I need the same effect as in http://www.filesonic.com/file/2959312855/CoreczkaArena.rar, when you Click "SLOW DOWNLOAD" the popup with ad moves back under the main window.
Got You Then - Here The Solution
var newWindow = window.open('Default.aspx');
newWindow .opener.window.focus();
You should not do this.
The reason for that is that your users' experience will suffer and that this type of behaviour is often considered harmful.
If you want to put some content "in the background", just do it within current page by implementing CSS and JavaScript scripts that make site behave as it would contain multiple "layers" or "windows". Try using jQuery UI for example.
If you insist on doing what you asked (creating new window and moving it in the back), someday it will probably stop working and your content will be blocked by popup blockers. But before that happens, you will probably receive negative feedback from the users of your site.
There is not necessarily only bad intentions to want this type of behavior of the browser.
My web application is running on Chrome.
I need to launch http requests to call a web service in localhost for document management from the document server.
And I would like to avoid cluttering the user's desktop with extra windows.
With Window.open you can reduce to the size 100/100 but you can't minimize totally when launching the window.
On the other hand, manually, you can do it afterwards.
I don't see why it can't be done directly when the calling site is in https
Cpf
I am looking for a way to improve the workflow in a PHP based CMS. There is a lot of switching between the editor mode and the preview mode of the page. The editor mode is huge to load, and so I would like to open the preview mode in a different window.
I don't want to use new windows or an iframe within the current window to keep the workflow simple and to avoid confusion.
Is there a way to explicitly open a new tab (not window), and to jump to that tab from a document, in Firefox? The number of users is limited, so there is the possibility to set up the client with the necessary extensions / permissions.
I know Firefox can be forced to open all links in tabs, but I think that won't cut it, as I still can't address and focus the newly opened window.
Thanks for all the great answers everyone. I have now enough material to decide whether I'll take the greasemonkey approach, rely on the user to set up "open in tabs" and address the window by name, or use a "inline" HTML solution as so many of you suggested. I am accepting the answer that I feel went most effort into.
There is no way to force a window to open as a tab. It's all dependent on the user's preference settings.
I second the answers that say you should do this in HTML using Javascript. Then it can work in all browsers that support JS.
I would put two divs on the page and show/hide each div depending on which tab is selected. If you are clever about this you could trap the click on the tab and determine if the user left-clicked or middle-clicked. If they left click you load that tab on the page. If they middle-click you let the browser open a new tab/window (according to the user's prefs, don't try to force it), and leave the current window unchanged (that is, don't switch to the new tab). The action for clicking on the tab would be to use AJAX to load the contents of the remote document and put it into the tab. Use Javascript to modify the URL before submitting the AJAX request so that the server knows to send a web page fragment instead of the whole page.
The advantage of this dual-natured solution is that the tabbed approach will work the way you want it to work for the majority of cases, but for users with, say, two screens, or who prefer switching between browser tabs, they will still have the flexibility to work in multi-window mode. This can all be done without any browser extensions and it should work equally well in IE as well as Firefox, Opera, etc. Avoid locking yourself into one browser, even one as excellent as Firefox. One day a customer will need to use Opera or Safari and you'll be stuck.
You say you don't want to use an iframe to avoid confusion. Now I don't know about the layout of your website, but I've been using the approach that the editor opens in its own div right next to the content being edited and the content is being live updated as you edit. No need to change tabs.
(If the window is too narrow there are HTML tabs Edit and Preview)
It does not seem to add confusion to the user and for me this approach works really well. Maybe it's worth considering in your case.
What about using iframes and JavaScript?
I know you said you want to avoid 'confusion using iframes', but in my opinion if you really need to load different pages at the same time this is the best option.
In theory, you could create your own tab system using javascript or even better, using jQuery, because its UI module offers pretty cool tab control.
For every tab you could load separate "headerless-footerless" version of your specific admin page inside <iframe> element. If user wanted to modify something different, he will simply click on the tab and bring different iframe.
All this could also be done using AJAX, but iframe solution is quite easy as you just need to load ready page and all postbacks are already handled by original page and separated from master-admin-page.
You might also need to play a little bit to set correct height of your iframe to fit all the content without scrollbars, but this again, is just bit of javascript.
Nope, there's no way to force the opening of a new tab, simply because this would be unsupported by un-tabbed browsing
You can only set it to open a new window, not a new tab.
Greasemonkey springs to mind - a quick google gives open in tabs on left click. I think you could modify that so it only runs on one particular page, and you'd be up up and away.
This question made me wonder if HTML 5 allows that sort of specification, and it doesn't (nothing in one of the other hyperlink attributes, either). A new browsing context is a new browsing context, there's no way to express a preference for tab over window or foreground over background.
You can't force a tab, but if you use a target with a specific name, like target="my_cms_window", many browsers will open this as a new tab. Additionally, they will remember the name and if you use the target repeatedly, put the contents in the same tab. I have found that this works pretty well in the real world.
How can we detect when a user opens a new window. The user is already authenticated and we make heavy use of sessions.
We were trying to avoid Ctrl+N javascript hooks but maybe that is an option.
I am assuming the request is the exact same URL...with Ctrl+N?
We were trying to avoid ctrl-n javascript hooks
Forget it. Whilst you could in theory try to catch keypress events for ‘n’ with the Control key modifier, there are any number of other ways to open a new window or tab which may be more likely to be used, and you won't be able to catch. File->New Window/Tab, middle click or shift-click link, middle click back/forward buttons, right-click-open-in-new-window, open bookmark in new tab, double-click browser icon...
The user is already authenticated and we make heavy use of sessions.
That shouldn't be a problem in itself. I guess what you mean is that your application is dumping all sorts of page-specific data in the session that it shouldn't have, and now you find the application breaks when you have more than one window open on it? Well, commiserations and happy rewriting.
In the meantime about all you can do is tell the user “please don't try to open two browser windows on the same application”. There are potential ways you can make JavaScript on one page notice that JavaScript is running on another page in the same domain at the same time, generally involving using document.cookie as a inter-page communications conduit. But that's also a bit fragile.
If opening a new window causes a problem in your application, then you should fix the application code to handle it instead of trying to apply an inconsistent and unreliable client-side "bandage". That's my opinion.
Why?
And anyway you can't detect it. User can open new window not only with Ctrl+N but also with File->New Window.
You could possibly put a window count into the session and increment it on window.onload and decrement it on window.onunload.
Imagine me tutting, sucking air through my teeth and going "better you than me, guvna" if you use that, though.
What I have done to solve this issue is when the user authenticates set the window name on valid login.
<script>
window.name = 'oneWindow';
</script>
And then on the master page do a javascript check:
<script>
if (window.history.length == 0 || window.name != 'oneWindow')
//history length to see if it's a new tab or opened in a new window 0 for IE, 1 for FF
//window name to see if it's a CTRL + N new window
</script>
If the check is true then hide/remove the main content of the page and show a message stating they are doing something unsupported.
This works when your login page is not tied into the master page.
If you do not have a master page then I would suggest putting the check on all your pages.
Yes and no,
You'll always see it if a control has focus, else the event is sent directly to the browser and the code on the page never hear about it.
In my experience you can't hijack the browser's shortcut, your mileage may vary. You are likely to know it happened but the browser will do its thing (for obvious reason)
In most browsers, the effect of Ctrl-N is to open a new window at the same URL as the old one and associate it with the same sessionID.
Your best bet would be to modify the back end code if possible and allow for such things. Breaking the browser's feature is never a good thing.