Member Avatar for gendv

On my main web page, I have a button that opens a browser window, this window contains a tree menu created with JS.

What I need to know is if I click on a link in the tree menu, is it possible to comunicate with the main page in such a way, that the main page follows the link and not the browser Window? If so, how?

  • 3 Contributors
  • 3 Replies
  • 189 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by tgreer

Dani AI

Generated

Short practical summary: yes — have the popup tell the original (opening) page to navigate. Which technique to use depends on whether both pages share the same origin and how robust you need the solution to be. As pointed out, referencing the opener is the simplest path when both pages are same-origin; when they are different origins, use cross-window messaging instead. Below are two robust, production-ready patterns and a few practical tips.

The simplest (same-origin) pattern — intercept clicks inside the tree, prevent the default, then attempt to update the opener's location and close the popup. Wrap the assignment in try/catch so a cross-origin error falls back gracefully:

// inside the popup
document.getElementById('tree').addEventListener('click', function(e){
  var node = e.target;
  while (node && node.tagName !== 'A') node = node.parentNode;
  if (!node) return;
  e.preventDefault();
  var href = node.getAttribute('href');
  try {
    if (window.opener && !window.opener.closed) {
      window.opener.location.href = href;
      window.close();
    } else {
      window.location.href = href; // fallback
    }
  } catch (err) {
    window.location.href = href; // cross-origin fallback
  }
});

For cross-origin safety use postMessage. The main page listens for a validated message and navigates only after checking origin and sanitizing the payload; the popup sends the clicked URL as a message:

// main page
window.addEventListener('message', function(ev){
  if (ev.origin !== 'https://your-site.com') return;
  var url = ev.data;
  // validate url here
  window.location.href = url;
}, false);

// popup (on click)
window.opener.postMessage(href, 'https://your-site.com');

Practical tips: use event delegation on the tree container so the menu stays dynamic (see the first snippet). If you used attributes that block opener access (for example when opening the popup with a no-opener policy), the direct method won't work and messaging is required. As noted, keeping real anchor elements helps accessibility and fallback. Validate URLs in the parent before navigating and close the popup once navigation is triggered.

Recommended Answers

All 3 Replies

Member Avatar for Member #46692

What are you trying to do?

Add html address links to your javascript tree?

Member Avatar for gendv

What are you trying to do?

Add html address links to your javascript tree?

yes!

Html page has a link that opens the window with the javascript tree, obviously this is a menu, I need this menu to control the main HTML Page.

Forgot to mention that the JS tree has been placed in a <div> tag in an HTML page.

It works ordinarily, but now it is in a browser window, and if i navigate noremally, it will continue to browse in that window, which is not what I want.

I know in HTML it would be "_parent" but this is a JS menu.

Member Avatar for tgreer

You can refer to the parent window via JavaScript as "opener".

However, if your JS menu simply contains/builds hyperlinks, you can still use the "target" attribute within those links, can't you?

You can also specify <base target="_parent"> within the header on the page, so that all hyperlinks go to the parent page.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.