How do you communicate with the main page from a HTML notification? - javascript

I'm working on a fork of an online Twitter client. (Streamie, if you're interested.) I'd like to improve the Chrome notifications by using HTML notifications instead of the static ones it uses now.
The problem is that I need to get the tweet object from the main page to the notification, and I'm not sure how to do this. In my Chrome extension I got around this by making an array with a queue of tweets to show, adding a function to the window object which returned queue.shift() and then calling that function via chrome.extension.getBackgroundPage().dequeueMsg();.
However, I obviously don't have this option in a web client. Is there any way to communicate from a notification with the window that opened it, or from the page to the notification's DOM?

Well from the spec:
Within a web notification, the window.opener property should be set to the window which created the notification. If the notification was created by a worker script, window.opener should be null.
It looks like code in the notification page can access window.opener just like a page created with window.open() can. (Now, as to the practical aspect of doing this with today's actual browsers, that's another thing I guess.)

Related

Dynamic resizing of app window (bounds) via webview

I have build simple desktop application, which is loading content into webview element.
Now I am looking for some options how to resize application window based on some Javascript action called from DOM inside webview.
For example:
By default I am displaying some information related to the team of people using this Chrome application on their desktop. These data are being fetched from PHP application running on our servera rendered using HTML/CSS/jQuery.
Now I would like to render some form, which will give us options to edit this content directly inside Chrome application and store them in database, but the issue is, that by default is Chrome application very small: approx. 200x300px and at the moment, when I render this form I would need to resize whole application to approx. 300x500px and I have no idea how to achieve that.
I was browsing in Chrome apps documentation where i have found some info related to app.window, but I did not find a way, how to apply this into the real world app and execute such a commands via Javascript inside webview element.
Thank you for any ideas and suggestions.
You won't be able to do that from inside the webview. You are correct that chrome.app.window is the required API, but a webview-embedded page has no privileges to call it.
You'll need to communicate with your app's script, which has the necessary privileges. I would actually recommend using the "externally_connectable" method since it's for a specific site.
Once you've passed a message to the app page's script, you can resize the window with
chrome.app.window.current().innerBounds.setSize(width, height)
or, in case of a listener in the event page,
chrome.app.window.get(windowId).innerBounds.setSize(width, height)
Note that you can set the initial size when creating the window.

How can I use postMessage to share data between top level windows?

Using Web Messaging (postMessage), it's easy to send messages between windows including iframes and popup windows opened through Javascript. However, is it possible for two windows opened individually by the user to find each other and communicate?
As an example, if the user opens www.example.com/app.html in the browser, then the same page in another tab/windows of the same browser, I want the second window to know that it should act as a "child" of the first one and exchange a stream of events via postMessage. How do I detect the presence of another open window and how to I get a handle to it that I can use with postMessage?
i don't know if it's possible with postMessage.
but, it should be possible with localStorage or sessionStorage (which lives in the session scope).
using this approach you can write a value in one window/tab, and read it in the other window/tab, of course assuming that it's all on the same domain.
see more here: http://php-html.net/tutorials/html5-local-storage-guide/
hope that helps.

accessing other tab from one window

How does the browser treat multiple tab? Are they completely separate entity where no interaction is possible? I understand the sandbox concept of the browser and other security concerns but is it possible for a webpage to interact with another tab in the browser?
Basically my question is: If a user loads one webpage in a new tab, is there some way to access information of other tab which is already opened or will be opened after?
I have one concept of an application which needs to know about the other tab already opened or opened after my conceptual webpage but I don't know if this is possible.
As far as I know, this isn't possible. The browser wouldn't allow you to manipulate the browser's lower functions in a regular environment. It would ignore it or show a security error come up.
I think there is no way to do that, except when both documents are written to communicate with each other (Like in vBulletin new windows). The only way to access tabs is writing Add-Ons for the browser.
There is no way to access other tabs on the client-side.
However, I can imagine a scenario in which this could be done server side. Have the user log in to your site on both tabs and use something like sockets to pass data back and forth from one tab to the other using the server as a middle-man.
If both pages are from the same domain, you can use cookies or, in HTML5, local storage.
If you own the other tabs, you can broadcast to other tabs, and other tabs can broadcast back to your tab, creating a practical communication channel among them.
This is called Inter-window messaging, and it uses LocalStorage.
To simply check if you are the active tab, use $(window).blur( ... ), or a similar technique using a library of your choice.

js communicate between popup to main window

I got two browser windows on the same domain,
one is the main window and the second is small popup window.
i found this: How to Communicate between two browser windows?
but, the problem is the popup opens as event on the local computer by 3rd party software...
and i don't wish to communicate back to the server, and reading the status at the main window, for slow time issues..
i wish to transfer some data from the popup directly to the main window via JS (and close the popup right after).
the event is a VOIP new income call opened by the local phone soft dialer with parameters, and the main window is a browser CRM that will need to show incoming call status via JS on the same page, AJAX-like [only local].
p.s:
maybe there is a way to communicate between browser to windows application?, so the 3rd party software will send data to it and the application will communicate to the window
(or Firefox extension - but i prefer without the need to install more addons)...
what approach should i take? what do you think is the solution?
thanks allot. ;)
If the one browser does not open up the other browser, there is no way for the two browsers to talk through window.opener.
What you could try is storing data into localstorage and have the windows poll localstorage for changes.
Have you tried using window.opener to refer to the parent window?

Closing a popup window from a window the popup was not opened in using javascript

If I open a popup from a page is there a way I can close that popup from a different page?
Page1->Creates and opens popup.
Page2->Closes popup.
Since you can not keep a reference to your popup window on navigation, no you can not do this. But if you use pushState to change the url of your parent window and do not actually navigate, you can do it. Just simply by using close() method you can close that popup window
Other option is using a server side script to send the close signal to you popup window
I think any well-coded browser should run each page in a sandboxed environment, so one page should not even be aware that other pages exist or are being browsed, let alone what they do to the DOM or the javascript they run.
Therefore, any solution to allow communication from two different webpages (or the same page loaded two times in the browser), would have to go via an external mechanism. If its the same page loaded two times within the same browser, they should share their localStorage, so you could use it as a way to send messages.
If not, you can always rely on an external web service to do this. The page opening the popup would have to implement a polling service to see whether it should close it, and the page attempting to close the popup would have to make an AJAX call requesting it to the server, and wait for the other page to pull the result.
It's not as easy as one line of javascript, but if you REALLY want this feature, you could implement it.

Categories