Member Avatar for kevin wood

i am trying to write a function so that when a user enters onto a page selected images change with each page that is entered. the page uses an iframe to load the new data so i need to swap the images on the main page which holds the iframe inside it.

function swap_image{
    document['imgMain'].src = title_commissioning.jpg;
  }

in the body of the page

onload="swap_image"

would the code look something like the code above or would it need to be expanded because the images that are being change are not in the iframe.

  • 1 Contributor
  • 3 Replies
  • 109 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by kevin wood

Dani AI

Generated

This thread shows the common patterns and pitfalls when the page that holds an iframe must change its own visuals when different iframe pages load. Two robust, maintainable options work in almost every setup: direct parent access (only when iframe and parent are same-origin) and cross-window messaging (works across origins). As discovered, loading images into iframes can be a quick fix, but the approaches below give clearer, safer behavior and easier debugging.

Use a CSS-class approach in the parent and expose a small API the iframe can call. Example (parent):

/* parent.css */
#titleArea { height:24px; background-repeat:no-repeat; background-size:contain; }
.title-commissioning { background-image:url('images/title_commissioning.jpg'); }
.title-home        { background-image:url('images/home_title.jpg'); }
/* parent.js */
function setTitleVariant(name) {
  const el = document.getElementById('titleArea');
  if (!el) return;
  el.className = 'title-' + name;
}

If the iframe is same-origin, the iframe can call parent.setTitleVariant('commissioning') when its content decides which image to show. If the iframe is cross-origin, use window.postMessage instead. Parent listens for messages, validates origin, and applies the class:

window.addEventListener('message', function(e) {
  if (e.origin !== 'https://trusteddomain.example') return;
  if (e.data && e.data.type === 'setTitle') setTitleVariant(e.data.variant);
});

Iframe sends:

window.parent.postMessage({ type:'setTitle', variant:'commissioning' }, 'https://your-parent.example');

Troubleshooting tips: ensure the DOM element ID exists and the parent function is defined before the iframe attempts to call it; use developer console for errors and check network requests to verify image paths; prefer background-image: url(...) or class toggling over setting raw style.background strings. For details on secure messaging and same-origin rules see the MDN docs on Window.postMessage and the Same-origin policy.

Member Avatar for kevin wood

i ahve changed the code but it still is not working the code i have now looks like this

function changeImage() {
if (document.getElementById) {
document.getElementById("image").style.background="images/home_title.jpg";
}
else if (document.all) {
document.all["image"].style.background="images/home_title.jpg";
}
else if (document.layers) {
document.layers["image"].style.background="images/home_title.jpg";
}
}

in the body tag

onload="changeImage()"

and were the image is displayed

<td height="24"  colspan="2" id="image" background="images/commissioning_title.jpg"></td>

i will kep looking for the solution if i find it i will post it. if anyone knows were to find the solution please post the address here.

Member Avatar for kevin wood

still cannot get any code to work anyone know of any way to get the images to swap when the page is loaded. everything i have tried has failed up to i will keep trying though.

Member Avatar for kevin wood

i ended up getting it work using iframes, i no it is not the same but it works.

i set the i frames to load different images in from a button click in the menu. it works fine and has no effect on the page loading times.

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.