1

I use the following to open new tab (in new process) with some page content,

var p = document.getElementById("myElement"); 
var a = document.createElement('a');
a.setAttribute('href',".../mypage.html");
a.setAttribute('rel',"noreferrer");
a.setAttribute('target',"_blank");
p.appendChild(a);
a.click();

http://news.softpedia.com/news/Force-Google-Chrome-to-Open-Links-in-New-Processes-128962.shtml

When you use this code it always open new tab, I want that when you call to this code it will see if it was a previous call that open in new tab,then it will close it and the new call will be opened in new tab. or maybe to run the new page in the previous tab without close it.

I cannot use the regular window.open API's ...

John Jerrby
  • 1,683
  • 7
  • 31
  • 68
  • Doing it that way, you probably have no way to access the newly opened tab at all, which is why `window.open` is generally preferred. – adeneo Oct 22 '16 at 15:23
  • Service workers can be an option, given that both the pages are served within the same domain. If your server has a backend technology, you can send the content to sever, and have the new tab making request every 3 seconds for changes or use a websocket connection – Andrews Oct 22 '16 at 16:11
  • @Andrews - Thanks but I dont have server side , our impl is pure js client side,can I use service worker then? if yes can you provide some example? – John Jerrby Oct 22 '16 at 19:39
  • @adeneo - so do you think that 100% there is no way/ trick / workaround to achieve this? Im sorry but we cannot use windwo.open ... – John Jerrby Oct 22 '16 at 19:40
  • There's always a way, there's just no easy way. There's no off the shelf API available clientside that would let you access another tab opened that way, but maybe if you find a way to identify the other window, you could use `postMessage` or something similar. Otherwise the only option is to use a server as a gobetween. – adeneo Oct 22 '16 at 19:42
  • 1
    Interesting problem and worth trying out [Service Workers](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) – L J Oct 22 '16 at 19:46

3 Answers3

1

Service workers are a possibility if you have control over all the pages involved.

How to Send Messages Between Service Workers and Clients describes how to implement a service worker that goes in each page and provides a means to broadcast messages between those pages.

Service workers do not have access to the DOM. Instead, you can arrange for messages to be passed to a particular client (page) and then that client performs it's own DOM manipulation based on that message.

Regardless of the solution, keep in mind that pages are sandboxed for security and so require some kind of voluntary agreement in order to interact. If it weren't for this, it would be particularly easy to, for example, have one page/tab hijack your password when you enter it into another page/tab.

Ouroborus
  • 16,237
  • 4
  • 39
  • 62
  • Thanks you very much 1+ ! Can you please provide example how can I interact with my two pages (i put some simple page reference ) like changing paragraph content or something else... – John Jerrby Oct 22 '16 at 20:17
  • @JohnJerrby This looks like an interesting project but, sadly, would require more development and debugging time than I currently have available. The article I linked above provides examples for communicating between instances of a service worker. [This article](https://googlechrome.github.io/samples/service-worker/post-message/) provides examples for communication between an instance of a service worker and the page it's attached to. I believe, between the two, this is enough for you to proceed with development. If you run into issues you can, of course, post another question. – Ouroborus Oct 22 '16 at 20:50
1

What you need is a SharedWorker (not a Service Worker, different things). You have a complete example in the MDN page linked before.

Nevertheless, according to caniuse.com, localStorage is a better option regarding to compatibility to coordinate small tasks like this. For your specific case, inside index.html:

<a href="example.html" rel="noreferrer" target="_blank">Open in another process</a>
<button>Close</button>
<script>
document.querySelector('button').onclick = () => {
  // Change the value if you want the storage event to be triggered.
  localStorage.setItem('close', Date.now());
};
</script>

And now inside example.html:

<p>This page is in another process.</p>
<script>
window.addEventListener('storage', event => {
  if (event.key === 'close') { window.close(); }
});
</script>

Hope it helps!

Salva
  • 6,507
  • 1
  • 26
  • 25
  • Thanks slava , I assume that I need to use shard worker (this is the reason that I put this tag and also ouroborus said that but not sure how to use it in my context ...example will be very helpul! – John Jerrby Oct 25 '16 at 09:50
1

Use the same technique as in my answer here . But instead of changing the the dom in the main window just call window.close(); Example

Community
  • 1
  • 1
Astasian
  • 429
  • 4
  • 15