Member Avatar for dziobu

Hi Guys.

Please help! I give up! I don't see the answer for my problem anywhere!

It's quite difficult to explain so please bear with me:

I'm designing a website which contain 5 main (parent) pages (index.thml, catalogue.thml, etc.). Each page have NAVIGATOR, embed <iframe> in the "center" and the FOOTER. In this way I can quickly update the website by updateing only the content of <iframe> document, without copying NAVIGATOR and FOOTER to every single page (especialy when the website will have 100+ pages).

Everything is working fine. When the user is clicking on something within the <iframe>, it's opening in "_self" target on the same - parent page. Nice.

BUT....

When the user will click on any link within the <iframe> using "OPEN IN NEW TAB" or "OPEN IN NEW WINDOW" the browser will open new tab/window ONLY WITH THE <iframe> CONTENT, without the parent site. It looks stupid, as there's no navigator, footer, just a plain document from the <iframe>.

Is there any way to allow the user to open a new tab/window from <iframe> to display the parent site along with the desired link from <iframe>?

What do I want is:

<parent_site.html>
inside the site we have
<iframe>
which contain
*frame.html*
</iframe>
</parent_site.html>

frame.html contain link to the site, let's say, *contact_us.html*

On "normal" click *contact_us.html* would replace *frame.html* within the parent_site.html and that's ok

but

when the user want to open a new window/tab by clicking on *contact_us.html*, he will see just a plain *contact_us.html* file, without the parent site.

I want a new window/tab which will contain parent_site.html with *contact_us.html* in <iframe>.

Is there any hope to do it?

I don't want to end up with editing +100 pages just to add new button to the navigator.

I'm sure that someone can come out with some idea from your owm experience.

Thanks for all sugestions,

Regards,

dziobu

P.S. I think I can do it by using PHP but I'm more like graphic designer than website designer and PHP is rather a black magic for me.

  • 2 Contributors
  • 1 Reply
  • 115 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by fatboislimm

Dani AI

Generated

Short answer: browsers will open whatever URL is in the link when a user chooses "Open in new tab", so the only reliable way to make a new tab show your site chrome plus the desired content is to ensure the link's href itself points at the wrapper (the parent layout) — or to stop using an iframe and deliver content via a single templated page on the server.

Two practical options that avoid editing 100+ files:

  1. Server-side template (recommended for maintenance and SEO). Use one wrapper page that includes shared nav/footer and loads content based on a query parameter. This is what you hinted at with PHP, and ; it avoids iframe quirks entirely and is the cleanest long-term approach.

  2. Keep the iframe, but have the parent page rewrite the anchors inside the iframe (same-origin only). Rewriting makes each link’s href point to the wrapper plus an encoded content URL, while a click handler preserves the original in-iframe behavior for normal clicks. That way a user who "opens in new tab" loads the wrapper page (with your nav/footer) and the wrapper reads the param and loads the requested content into its iframe.

Example parent-side script (inject on the wrapper page; requires same-origin):

var frame = document.getElementById('centerFrame');
frame.addEventListener('load', function(){
  try {
    var win = frame.contentWindow;
    var doc = frame.contentDocument || win.document;
    var anchors = doc.getElementsByTagName('a');
    for (var i = 0; i < anchors.length; i++) {
      (function(a){
        var href = a.getAttribute('href');
        if (!href || href.indexOf('javascript:') === 0 || href.charAt(0) === '#') return;
        var abs = new URL(href, win.location.href).href;
        a.setAttribute('data-orig', abs);
        a.setAttribute('href', location.pathname + '?content=' + encodeURIComponent(abs));
        a.addEventListener('click', function(e){
          if (e.button === 0 && !e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey) {
            e.preventDefault();
            frame.src = a.getAttribute('data-orig');
          }
        }, false);
      })(anchors[i]);
    }
  } catch (err) {
    console.warn('Cannot rewrite iframe links (cross-origin?)', err);
  }
});

Make the wrapper read the query and load the iframe on page load:

var q = new URLSearchParams(location.search).get('content');
if (q) document.getElementById('centerFrame').src = q;

Caveats: this requires same-origin content in the iframe. If pages are cross-domain you cannot inspect or rewrite links from the parent. Also sanitize any server-side parameters to avoid file-inclusion risks if you implement the PHP/template route.

Member Avatar for fatboislimm

I'd like to know if this can be done by php too. So far i've been doing it by copying and pasting the layout into a new file and just updating the iframe url. it gets the job done but it gets tedious after a while. please update if you come across anything

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.