Iframes interacting

General Web Dev
1

Hello, all,

A co-worker is working in a project that uses iframes to pull in content from other sources (which also belong to us.) Two of these sources contain an image carousel that was written from scratch by the same developer. When this page loads, the carousel of one iframe is affecting the carousel of the other iframe. The second carousel is not progressing smoothly, it will “flip” through three images before pausing, while the first one is progressing normally.

How is this possible? I thought that, sandboxed or not, iframes load as distinct instances, isolated from the rest of the page.

V/r,

^ _ ^

2

I was under the impression that iframe instances were launched in separate threads. Another co-worker postulates that the browser itself still sees the class names and functions and if they are named the same in both frames, this can ‘confuse’ the browser. The code and css for the carousel in the first iframe is the same code and css for the second frame. So, I’m going to guess that my understanding of the iframes in their own thread is misguided.

V/r,

^ _ ^

3

Not really my area but I also understood Iframes to be completely separate and assume you have tried running only the second iframe just to make sure it works in an iframe on its own?

I also assume that the carousel is not saving state serverside and being accessed by both scripts and thus out of sync?

It may be something to do with how the carousel was created and when you add a second iframe a latency effect may be introduced affecting a js timeout or similar and all things happens at once initially.

I guess we’d need to see a demo of the problem to debug properly :slight_smile:

4

Unfortunately, I cannot offer a link because it’s on a restricted DoD portal. :frowning:

As far as testing with just the second iframe, I’ll pass that along to the developer who is working on that project, and see if that makes any difference. Thank you for the suggestion!

The carousel is just your standard vanilla JS carousel using images saved to the site structure (ie, not being pulled from a database or anything like that.) But the code used in both iframes are identical. He did get some satisfaction by renaming the functions in the second iframe source, and changed the class names. This seems to work.

V/r,

^ _ ^

1 Like
5

I just did a test with an old (single use) slider of mine and included it in 3 iframes and it works fine with no interaction between each.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>untitled document</title>

    <style>
        iframe {
            display: block;
            margin: 0 0 2em;
            width: 100%;
            height: 100vh;
            overflow: auto
        }

    </style>
</head>

<body>

    <iframe src="http://www.pmob.co.uk/My-Slider/index.htm"></iframe>
    <iframe src="http://www.pmob.co.uk/My-Slider/index.htm"></iframe>
    <iframe src="http://www.pmob.co.uk/My-Slider/index.htm"></iframe>


</body>

</html>
1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.