Changing Iframe Src with JavaScript

Changing iframe src with Javascript

In this case, it's probably because you are using the wrong brackets here:

document.getElementById['calendar'].src = loc;

should be

document.getElementById('calendar').src = loc;

How to change iframe src to be variable

You could fill the iframe src property with javascript. Get the iframe by ID and fill the src property with your data.

<script type="text/javascript">
  window.onmessage = (event) => {
    if (event.data == true && event.data != "") {
      document.getElementById("myIframe").src = event.data; 
    }
  };
</script>

<div class='embed-container embed-responsive embed-responsive-4by3'>
  <iframe id="myIframe" width="600" height="9000" src=receivedData frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

This should fill the src property on the iframe as soon as you receive data.

For a reference check this out w3schools iframe src property

Changing Iframe src dynamically

I think the code runs to early, JS tries to find a element with that id, but there isn't a element because the body isn't loaded. Try to place to code to the bottom of the page or put it in a function and execute that function on for example page load.

    <script>
    function loadIframe(){
    // getting value from localstorage

    var x = localStorage.getItem("firstname");
    //alert showing the value 

    alert(x);
    //but this is not working.
    document.getElementById("framee").src='https://thingspeak.com/channels/' + x +'/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15';
    }
    </script>

    <body onLoad="loadIframe()"> 

    <iframe id="framee" ></iframe>

    </body>

iframe src change on button click

function newSrc() {  var e = document.getElementById("MySelectMenu");  var newSrc = e.options[e.selectedIndex].value;  document.getElementById("MyFrame").src=newSrc;}

<iframe src="https://beamtic.com/" style="width:450px;height:450px;overflow:scroll;" id="MyFrame"></iframe><select id="MySelectMenu">  <option value="https://beamtic.com/">Beamtic</option>  <option value="https://fr.wikipedia.org/wiki/Main_Page">Wiki</option></select><button onClick="newSrc();">Change Iframe Src</button>

Change Iframe src based on user input

In order to change the iframe source, you'd need a listener for when the input changes and when it does, change the source of the iframe by updating the src property. Setting up the listener, you could do something like this:

// Grab the element by ID
document.getElementById("example_input")
  // Add the event listener to "input" 
  .addEventListener("input", exampleFunc);
  
function exampleFunc(event){
  // Grab iframe by ID
  let iframe = document.getElementById("example");
  // Update the source
  
  // First grab the input that was typed into
  let input = event.target;
  // Next get the value of that input
  let newUrl = input.value;
  
  // Now update the "src" property of the iframe
  iframe.src = newUrl;
}

<html>

<head></head>

<body>
  <input type="url" value="https://example.com" id="example_input">
  <iframe id="example" src="https://example.com" width="1000" height="450" frameborder="0" scrolling="no"></iframe>
</body>

</html>

How can I change iframe src by clicking on different divs?

Here is a working example of changing src on click of buttons and every time changed src is displayed.

First src values are provided in a array
Now looped through all the tags with class .srcChanger and added event listener which actives on click .
Then function is executed which takes value from array according to i th value of tag

var locations = ["https://www.youtube.com/embed/K0u_kAWLJOA",
  "https://www.youtube.com/embed/c7nRTF2SowQ",
  "https://www.youtube.com/embed/6LOD-pwJY6E",
  "https://www.youtube.com/embed/8X2kIfS6fb8",
  "https://www.youtube.com/embed/p5yUKjOOWvM"
];

var btnSrc = document.getElementsByClassName("srcChanger");
for (let i = 0; i < btnSrc.length; i++) {
  btnSrc[i].addEventListener('click', function() {
    document.getElementsByClassName("responsive_frame")[0].src = locations[i];
    document.getElementById("demo").innerHTML = locations[i];
  })
}

<div class="full">
  <iframe id="iframe" class="responsive_frame" src="https://www.youtube.com/embed/K0u_kAWLJOA"></iframe>
</div>
<button class="srcChanger">Btn1</button>
<button class="srcChanger">Btn2</button>
<button class="srcChanger">Btn3</button>
<button class="srcChanger">Btn4</button>
<button class="srcChanger">Btn5</button>

<div id="demo"></div>

Changing iframe src by url

I ended up using window.addEventListener('popstate', function(event)) to keep track of changes on the url and location.hash to get the hash that was input in it.

I also had to use iframe.contentWindow.location.replace(newPage.html) to make sure that going back and forward works ok.

Changing Iframe Src with JavaScript