javascriptjqueryiframe

Replacing iframe on click

I'm having some trouble replacing an iframe on click. I'm still mostly awful at javascript so I'm pretty sure something within the script is the issue. Any help is appreciated!

Sourced some code and played around with it a bit, so forgive me if it's something obvious that I'm missing.

I want to have it so that there's an iframe (with a standard src) that can be changed into a different src when you click items on the list. Sort of like a little selection menu and a tv screen you can flip through, I guess.

Here's the code as I have it:

<div>
<li class="loadiframe" data-src="nerdout.html"> test </li>
<iframe id='frame' src= "index.html" frameborder="0" width="600" height="480">     </iframe>
</div>

<script>
    $('.loadiframe').on('click', function(){
      var src = $(this).data('src'),
          width = $(this).data('width'),
          height = $(this).data('height');
      $("#frame").attr('src',src);
    });
    
</script>
Solution

  • Like commented there is no need for JavaScript to change the page. An anchor can have a target attribute that refers to the name of the iframe.

    <div>
  <ul>
    <li><a href="data:text/html,<p>Page 1</p>" target="frame">Page 1</a></li>
    <li><a href="data:text/html,<p>Page 2</p>" target="frame">Page 2</a></li>
    <li><a href="/" target="frame">Some page</a></li>
  </ul>
  <iframe name="frame" src="data:text/html,<p>Page 1</p>" frameborder="0" width="600" height="480"></iframe>
</div>