Member Avatar for jay.barnes

Hi, all

I have a web page that breaks down to several divs, two of them containing iframes (one for content, one for a menu):

<HEAD>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="styles/default.css?ver=33">
</HEAD>
<BODY>
<div id="wrapper">
    <div id="header">Welcome to my website</div>
    <div id="menu"><iframe name="frame-menu" id="frame-menu" src="menu.php" frameborder="0" height="30"></iframe></div>
    <div id="main"><iframe name="frame-main" id="frame-main" src="login.php" frameborder="0" width="878" height="700"></iframe></div>
    <div id="footer"><A HREF="about.php" TARGET="frame-main">About Us</A> - Contact</div>
    <div id="bottom">&copy;2015</div>
</div>
</BODY>

After the user logs in via the form on the 'login.php' page, it runs through a PHP script that registers their login, and takes them to an account summary page (dashboard.php). I'm looking to use a JQuery script in dashboard.php to reload the menu iframe, so that I can run the PHP script that changes the "Log In" link on the menu to a "Log Out" link.

I have tried altering the solution suggested in https://www.daniweb.com/web-development/php/threads/319050/reload-the-iframe-src , but I can't figure out how to alter it to fit my situation.

Thanks!

  • 2 Contributors
  • 2 Replies
  • 3K Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by jay.barnes

Dani AI

Generated

Good call moving the refresh into dashboard.php, . As hinted, this works only if both iframes are same-origin; otherwise the browser will block cross-frame access. Also, relying on reload() can bite you with cached content after login, so it is safer to reset the src with a cache-busting query.

// dashboard.php (runs inside frame-main)
(function refreshMenu() {
  try {
    var doc = parent && parent.document;
    if (!doc) return;
    var menuFrame = doc.getElementById('frame-menu');
    if (!menuFrame) return;

    // Always hit the server to pick up new session state
    var base = (menuFrame.getAttribute('src') || 'menu.php').split('?')[0];
    menuFrame.src = base + '?_=' + Date.now();
  } catch (e) {
    // Swallow errors if cross-origin or parent not available
    console.warn('Could not refresh menu iframe:', e);
  }
})();

If you prefer jQuery syntax from within dashboard.php, this is equivalent and reads a bit cleaner:

$(function () {
  var $menu = $('#frame-menu', parent.document);
  if ($menu.length) {
    var base = ($menu.attr('src') || 'menu.php').split('?')[0];
    $menu.attr('src', base + '?_=' + Date.now());
  }
});

Practical tips:

  • If the menu reflects PHP session state, make sure the login sets the session cookie before redirecting to dashboard.php.
  • To avoid stale menus, send no-cache headers from menu.php during authenticated sessions, for example:
    Cache-Control: no-store, no-cache, must-revalidate, max-age=0 and Pragma: no-cache.
  • If you ever split origins, switch to postMessage to ask the parent to refresh the menu, since direct DOM access will be blocked.

Recommended Answers

All 2 Replies

Member Avatar for jstfsklh211

assuming everything is on the same domain

you could just do something like
parent.window.frames["myFrame"].location.href = 'menu.page'
from within the login iframe

Member Avatar for jay.barnes

I ended up using it in 'dashboard.php', but it worked perfectly. Thank you for your help!

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.