Member Avatar for saucy6969

hello
i am trying to make one of my original pages open up in the centre of my website (as all the other pages do).

when clicking on the Boarding House Reform button on the right hand side of the page, it opens up without the frame around it. No other pages do that.

Am I missing something in the code?

Click Here

Any help would be greatly appreciated.

  • 2 Contributors
  • 3 Replies
  • 214 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Good catch by and thanks to for confirming the fix. The symptom you saw happens when a link is a plain anchor that isn’t routed into the site’s iframe loader, so it navigates the top window instead of updating the framed content. Two reliable ways to make all buttons behave consistently are below.

A quick, HTML-only fix: give the central frame a name and target that frame from links (works without JavaScript). For more control, add a small unobtrusive script that intercepts clicks on links you mark and sets the iframe src.

Example iframe (place where your content should load):

<iframe id="contentFrame" name="contentFrame" src="/home.html" style="width:100%;height:600px;border:0"></iframe>

Example unobtrusive script (add class "iframe-load" to links you want routed into the frame):

<script>
document.addEventListener('DOMContentLoaded', function(){
  var links = document.querySelectorAll('a.iframe-load');
  for(var i=0;i<links.length;i++){
    links[i].addEventListener('click', function(e){
      e.preventDefault();
      document.getElementById('contentFrame').src = this.href;
    });
  }
});
</script>

Practical gotchas and tips: ensure pages you load don’t send X-Frame-Options or restrictive CSP headers (those will block embedding). Check relative asset paths in the framed pages (use root-relative or absolute URLs when needed). If you want back/forward history to reflect framed navigation, consider pushState. For accessibility, keep meaningful alt text, focus management, and clear link labels. Given limited time, the named-iframe + target approach is the fastest fix; the JS approach gives more flexibility and graceful progressive enhancement.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

I'd like to help but I'm having trouble following along with your code. With regard to your question..

when clicking on the Boarding House Reform button on the right hand side of the page, it opens up without the frame around it. No other pages do that.

The reason is because that element which is a simple link which displays an image has no instruction to display the contents within the iFrame. It appears to be a simple hyperlink.

<a href="bhop.html"><img src="_images/bh_reform_button.jpg" alt="Boarding House Reform" width="141" height="103" border="0" align="right"></a>

Now, with regard to other hyperlinks on your page, I noticed the ones in the footer area call a JavaScript function.

For example...

<a onclick="return loadIframe(&#39;main&#39;, this.href)" href="awards.html">Awards</a>

Member Avatar for saucy6969

that was the exact answer i was searching for JorgeM. Thank you so much. works like a charm now....and I apologize for the god-awful coding in the site. it's older than dirt and there is no funding for time to fix it. Appreciate you taking the time to help me!!!

Member Avatar for JorgeM

god-awful coding in the site. it's older than dirt

LOL, that's OK. glad that I was able to assist.

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.