One link opens two Iframe targets on same page

Question

I currently have a working webpage that has a list of links that open in a targeted iFrame. I would like to add a subsequent iFrame target and be able to open supplementary pages in that iFrame as well as the original iFrame with the same link.

From my research, it seems this should be possible with some JS but I'm struggling to figure it out.

So basically, how could I click on "Lot 1" and open up a Youtube in the "gallery" iFrame and, say, www.example.com in the "info" iFrame simultaneously?

  <iframe src="" name="gallery"</iframe>
  <iframe src="" name="info"</iframe>

  <a href="http://www.youtube.com/" target="gallery">Lot 1</a>
  <a href="http://www.youtube.com/" target="gallery">Lot 2</a>

you'll need to use "javascript" – Jaromanda X Apr 24 '17 at 03:26 — Jaromanda X, Apr 24 '17 at 03:26

Pyromonk · Accepted Answer · 2017-04-24T04:43:37.307

You can have an array/object storing the links, and then run an onclick event that will change the corresponding iframe sources to the values from said array (iframes have a src attribute which you can change through JS).

For example:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        var frm = ['gallery', 'info'];
        var hrf = ['http://example.com/', 'http://example.net/'];

        function setSource() {
            for(i=0, l=frm.length; i<l; i++) {
                document.querySelector('iframe[name="'+frm[i]+'"]').src = hrf[i];
            }
        }
    </script>
</head>
<body>
    <iframe src="" name="gallery"></iframe>
    <iframe src="" name="info"></iframe>
    <span onclick="javascript: setSource();">Click me</span>
</body>
</html>

If you'd like to have multiple span elements, each changing the iframes' sources to a different set of links, you can always use a multidimensional array (an array of arrays) for src and add a parameter to the function:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        var frm = ['gallery', 'info'];
        var hrf = [['http://example0.com/', 'http://example0.net/'], ['http://example1.com/', 'http://example1.net/']];

        function setSource(num) {
            for(i=0, l=frm.length; i<l; i++) {
                document.querySelector('iframe[name="'+frm[i]+'"]').src = hrf[num][i];
            }
        }
    </script>
</head>
<body>
    <iframe src="" name="gallery"></iframe>
    <iframe src="" name="info"></iframe>
    <span onclick="javascript: setSource(0);">Click me #0</span>
    <span onclick="javascript: setSource(1);">Click me #1</span>
</body>
</html>

Here hrf is an array that contains another array (['http://example0.com/', 'http://example0.net/']) at index 0 and yet another one (['http://example1.com/', 'http://example1.net/']) - at index 1. By passing a parameter to setSource we can choose what subarray we want to pick to get the sources from.

Please don't forget to close your tags.

Using the a tag for your purpose is not a good idea, I recommend using a span. The a tag's purpose is to link the user to another document, not run javascript code (not using a also means you don't have to use preventDefault).

The javascript: prefix is used for the onclick attribute to provide backwards compatibility for some older mobile browsers.

Ok, thanks for that. I just copied in your example to a blank html doc but the pages don't load in the iframes. I tried it on JSfiddle too, am I missing something? — Jake, Apr 24 '17 at 03:51
@Jake, Google and Yahoo don't allow embedding their pages in iframes, I have provided those links as dummies (I will update my answer, because the current one is indeed confusing in this regard). The answer to this question explains why certain sites won't work in an iframe: http://stackoverflow.com/questions/16624919/why-iframe-dosent-work-for-yahoo-com — Pyromonk, Apr 24 '17 at 03:55
Ah thanks, makes sense! I'm looking through the example and trying to understand how it works. Say I'd like to have several 'pairs' of sites where you have example.com and example.net. Eg example1.com & example1.net, example2.com & example2.net, etc. Am I just adding those to the array and making corresponding onclick events? — Jake, Apr 24 '17 at 04:05
@Jake, you can have an array of arrays: https://pastebin.com/K0cuv0aH (I can add this to the answer if you want). — Pyromonk, Apr 24 '17 at 04:15
That's exactly what I needed! I reckon it wouldn't hurt to have that in the answer in case another beginner like me has the same question. Thanks again — Jake, Apr 24 '17 at 04:25
You are very welcome, sir. I shall update the answer then. Please let me know if you have any questions or if I have accidentally screwed something up again. — Pyromonk, Apr 24 '17 at 04:36

score 0 · Answer 2 · answered Oct 01 '22 at 18:22

This code works simply great :

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="display:flex;
        justify-content:center;color:green;">
        GeeksforGeeks
    </h1>
  
    <iframe src="about:blank" id="frame1"> </iframe>
    <iframe src="about:blank" id="frame2"> </iframe>
    <button id="update">Click me</button>
    <script>
        document.getElementById('update').addEventListener('click', function () {
              // Change src attribute of iframes at a same time
            document.getElementById('frame1').src ='https://www.google.com/search?q=java&igu=1';
            document.getElementById('frame2').src ='https://www.google.com/search?q=farming&igu=1';
        });
    </script>
</body>
</html>

One link opens two Iframe targets on same page

2 Answers2

Linked