Updating a frame when there's 2 on the page - sometimes!

[bit-n...@hotmail.com]

I have a situation where a page will have 2 frames - one of them with a picture in it. The other one has a "next page" link - which, I want to update ONLY THAT FRAME. However - on every, say, *fifth* click of this link - ie. the guy clicks "next page", sees page 2 (in THAT frame), clicks it again, sees page 3, and so on - when it's the *fifth* click, I want the PICTURE FRAME TO BE UPDATED AS WELL!! ie. BOTH FRAMES. The rest of the time it must not be touched!!
How do I pull this off?

...and in case that's important - this will be a mobile site, so the browser must be capable of whatever you suggest....


Thanks :)

[JJ]

On Mon, 17 Apr 2017 21:02:54 -0700 (PDT), bit-n...@hotmail.com wrote:
> I have a situation where a page will have 2 frames - one of them with a picture in it. The other one has a "next page" link - which, I want to update ONLY THAT FRAME. However - on every, say, *fifth* click of this link - ie. the guy clicks "next page", sees page 2 (in THAT frame), clicks it again, sees page 3, and so on - when it's the *fifth* click, I want the PICTURE FRAME TO BE UPDATED AS WELL!! ie. BOTH FRAMES. The rest of the time it must not be touched!!
> How do I pull this off?
>

> ....and in case that's important - this will be a mobile site, so the browser must be capable of whatever you suggest....
>
> Thanks :)

You'll need a JavaScript for this.

Let's assume that the two IFRAMEs are named as `picture` and `navigation`.
i.e. has the NAME attribute set to mentioned values.

In the page where you want the link to update both IFRAMEs, assign an ID
onto it for use by the JavaScript code later. e.g.

<a id="nextPage" href="page5.html">Next page</a>

i.e. make the link like in the previous page but this time, add the ID
attribute onto it. Note: it's case-sensitive, and it must be unique. No
duplicate ID anywhere in the page.

Then, create the JavaScript code to assign a click handler onto it. e.g.

<script>
(function() {
var pictureURL = "picture2.jpg";
var link = gocument.getElementById("nextPage");
link.addEventListener("click", function() {
var frame = top.picture;
if (frame.frameElement) {
frame.frameElement.src = pictureURL;
} else {
frame.location.href = pictureURL;
}
});
})();
</script>

The above picture URL can be relative or absolute URL.