Develop Reference

Cocoa: WKWebView / WebView cannot open links inside Gmail or Inbox

I am the developer of Boxy, a famous native wrapper around Inbox by Gmail, and wanted to ask if anyone is able to help with something I have been struggling with since day one of development.
Here is the problem: links on inbox.google.com and gmail.com work differently than on other sites: clicking on them does not trigger a navigation action on my webview (I am using a WKWebView specifically, but the problem is also present using the old WebView). So I am having a difficult time opening links in an external browser when appropriate.
Because of this, at the time of this writing, I am relying on a terrible hack in order to open links: intercepting clicks on the document.body with javascript (using an event listener) and then forcing them to open on the external browser by calling the native app.
My best guess is that the Gmail/Inbox apps perform some javascript magic in order to track clicks on all the links inside emails and that, somehow, this interfers with the standard behaviour.
Has anyone got any idea how I can solve this problem?
Things I already tried
Implementing the method -webView:createWebViewWithConfiguration:forNavigationAction:windowFeatures: of WKUIDelegate. Did not work: the method is called but the request associated with the navigation action is empty.

I found a solution. This issue is due to when clicking link, instead of opening using target=_blank, Gmail attempts to open an about:blank window and then run javascript to redirect the link.
You need to make sure that Gmail can correctly receive the handle of the created window.
- (WKWebView *)webView:(WebUI *)webView
createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration
forNavigationAction:(WKNavigationAction *)navigationAction
windowFeatures:(WKWindowFeatures *)windowFeatures
You need to make sure this delegate method correctly returns the newly created wkwebview.

Is there a way to control browser size and position across multiple displays / monitors?

Preface
First of all, I am very well aware that webapps should not fiddle with window size or position. Been through a lot of similar SO questions and forum posts.
But this is a special case, where the browser is just a platform to run an app on several specific machines in a controlled environment.
Task
The app should manage windows across several displays. (up to 5)
What I've tried until now
Searched for methods for gaining information about the host system display information, but the window.screen object only reports properties of the display the window is currently on (or considered to be on, if it is halfway on one)
Tried window.moveTo and window.open with flags "left=123,top=123" but they are always limited to the current display
Tried window.resize and window.open with flags "height=123,width=123" but just as with the moveTo they are limited to the current display.
Question
What could I do to make my application use (without manual window positioning) all the available space in a multi display environment?
Scenario
Think of it like I have two projectors correctly aligned, and would like to make it possible for:
each project to project different things (each projector projecting its own browser window)
project an app seamlessly across both projectors (possibly fullscreen)
There could/should be a window running the master window layout logic
Note
I can use any flags, app or kiosk mode, as again: we deploy the app to the target environment.
The browser options are Chrome(preferred), Chromium, and Firefox on a Windows platform (because of the special video card we will be using for 5 displays).
Fallback solution
Manually stretch a window across available displays and run the apps in iframes within this master window.
Drawback: A single process is running everything, so should an app break within a frame it breaks everything.
Afterword
Also a solution to this question would be a great help as well: Windows / Chrome / ATI / Browser fullscreen across multiple monitors

Go with a chrome/firefox extension that has access to window/tabs specific APIs.
Either embed your whole application in the extension or communicate with the extension through messages (chrome, there's an equivalent on firefox).
Support in Chrome is experimental.

You can use window.moveTo(-1000,100) to move a pop up to a second monitor in IE if you check the permission "allow script-initiated windows without size or position constraints" under Internet Options/Security/custom level.
If you only have a single monitor connected, it will move the window to the edge of the primary display. I have not found a way to do it in Chrome though, it doesn't appear to have the same security option.

Try using the chrome.windows API to interact with browser windows. You can use this API to create, modify, and rearrange windows in the browser.
https://developer.chrome.com/extensions/windows
It even works with nightwatch.

Another possible solution is to use the win32 to size & position the window.
As seen in the solution of question: Chrome Packaged App and Dual Monitors (no code there, this is just for reference)

I don't think it's possible.
Browser really limit JavaScript in its permissions for security reasons.
Maybe you can manually(in JavaScript of course) set the x and y position far outside of the screen so it appears on another screen but that's not a neat way to do it.
As far as I can think of, you have two options:
Create different pages for every screen and open them separately every time.
Create all the windows with a button and make the user drag them to the corresponding screen. When the user clicks the button open the window in full screen/kiosk mode and load the content. However I don't know what will happen if you activate another screen while your in fullscreenmode somewhere. It might invalidate and close the fullscreenmode.
This is the only way you can have distinct windows in your browsers as far as I know.

open browser tab/windows in background

I am stuck with a little problem from few days now.
There is some solution over internet but they don’t match what I need.
I’m on a Spring web application, using flex. For some reasons I need to load a new windows (or tab) in background.
For now I manage to write some JavaScript script that put the focus on the main window when the child one is created but when the main window get the focus back it select the whole text and so the user loose all his work.
It’s why the new window MUST NOT take the focus at any time.
I also tried to create a link and simulate the middle click on it so the tab is created in background, but it only work on Chrome, beside I see that on Internet Explorer the tab is sometime created in background sometime in foreground (even if the setting option: “Always switch to new tabs when they are created” is NOT setted on, i must miss something).
Of course like in a lot of company the main browser is IE, so the solution must work for it, i can specify some setting to make the thing work as every user get the same env.
i've also tried to set the registry to make no application take focus but on 7 or 2008 RT it's not really usefull.
I’m looking for a solution in javascript, flex/AS or even html to create that tab without interrupting the user. If the main window loose the focus 1 sec but I manage to not select the whole text in flex it will be good too.
Thanks in advance.

Window focus for a faster loading pop-up

I am very new to JavaScript. Kindly note that I am trying below issue in a shell which overrides many JavaScript functions.
I have an issue with focusing a window: on a single "click" action, I navigate to a new page which has two JavaScript methods which launch two external URLs which I don't own. For example I launch Yahoo.com and Google.com. My JS launches Yahoo.com in current window (as a page navigate) and Google.com as a pop-up. I WANT Google.com WINDOW TO BE FOCUSED irrespective of loading time of either URLs. The major issue is I cannot use the setTimeout JS function as this function's behavior is altered within the shell and is not usable.
Note: I am using a custom reusable JS function to launch external URLs and I just pass values to that method. So I don't even have access to window object. If I can somehow achieve a time delay without using setTimeout, it will be ideal case. If not, I will have to override that custom JS function, get access to the window object. Even if I have control over those window objects for external URLs, since loading times are different, setting focus to the Google window object is not always giving me the focus on Google window.
(IE6 & 7)

You cannot guarantee the behavior you want, in general; browsers will not let you.
Safari generally ignores requests to focus windows. Firefox and I think Chrome can be configured by their users (not by your code) to allow focus requests, but by default they won't.

Creating new tab / switching between Tabs in Firefox?

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.