CODEWITHSUNDEEP
javascriptphphtmliframeembed
Sam
Sam

Reputation: 45

How to change iframe source using javascript

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.

Upvotes: 0

Views: 6862

Answers (2)

ThibaultV
ThibaultV

Reputation: 81

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';
})

Upvotes: 0

BCM
BCM

Reputation: 675

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;
}

Upvotes: 1

Related Questions