How to change iframe source using javascript

Question

I'm setting up an iframe to embed streaming video from a server, and it works perfect. I need that when a user click on tag to update the iframe and change the source of it. It also works good on different browsers on my desktop, but it's not working on the mobile devices. After the user click on the tag the iframe become empty and shows (not found) this case just on mobile devices browsers. Is there any solution for it?

I searched a lot for an answer, all of it give the same result for mobile browsers. I also tried using javascript function to update the source of iframe.

The iframe:

<iframe name="iframe1" id="frameid" style="width:600px; height:480px;" allowfullscreen src="http://serverip:8080/cc/embed.html"></iframe>

the link which will update the source of iframe:

<a href="#" onclick="update('http://serverip:8080/test.html')">

The javascript function:

<script>
  function update(loc) {
    document.getElementById('frameid').src = loc;
  }
  </script>

I also tried to reload the iframe, but it's not working too:

function update2(loc) {
     document.getElementById('frameid').src = loc;
     document.getElementById('frameid').contentWindow.location.reload(true);
  }

I also tried to create a new iframe on clicking the link, it creates a new iframe but also empty, showing (not found) too.

BCM · Accepted Answer · 2019-08-24 19:48:57Z

1

You can do somthing like this:

<a href="http://www.google.com/" onclick="return loadIframe(this.href);">Page 1</a>
<a href="http://www.apple.com/" onclick="return loadIframe(this.href);">Page 2</a>

<iframe name="frameid" id="frameid" src="http://www.microsoft.com/" frameborder="0">
        Your browser doesn't support iframes.
    </iframe>

function loadIframe(url) {
  $("#frameid").attr('src',url);
  return false;
}

answered Aug 24, 2019 at 19:48

BCM

6756 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Over a year ago

Just tried it, but it's also not working in my case. I think I need a way to reload the whole page updating the iframe source, but I really don't know the proper way to do that. Thanks for your answer.

ThibaultV · Accepted Answer · 2019-08-24 19:52:51Z

0

You are on the right track.

This line does work:

document.getElementById('myFrame').src = 'https://yournewurl.com';

Instead of using the onclick attribute on the link, try adding an eventlistener like so:

document.getElementById('myLink').addEventListener('click', () => {
// change src attribute of iframe
document.getElementById('myFrame').src = 'https://yournewurl.com';
})

answered Aug 24, 2019 at 19:52

ThibaultV

811 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to change iframe source using javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related