1

I have an iframe with src but I want to provide the link to src via javascript on click of the button. How do I pass the value?

EDIT: The webpage refreshes everytime I click on the button. It displays the webpage and then refreshes it to display again. How to avoid this?

    <button type="button" onclick = "Open()">Click Me!</button>

    <iframe id="iframe"
  src="" //Provide link here
  style="
    z-index: 10;
    display: None;
  ">
</iframe>

<script>
    function Open() {
      let myIframe = document.getElementById("iframe");
        myIframe.style.display = 'block';
        iframe.src = "www.mylink.com"
    }
  </script>
Arthur
  • 45
  • 5
  • `myIframe.src`? – BenM Apr 08 '21 at 19:47
  • @BenM But the website gets refreshed everytime i click on the button. That is, when I click on the button the second time, it displays the website and then it refreshes for one second to display it again. What is wrong with it? – Arthur Apr 08 '21 at 19:52

1 Answers1

2

you're not referencing myIframe when setting src in the example, you need to do myIframe.src = 'https://www.mylink.com'

dhazelett
  • 336
  • 1
  • 3
  • 10
  • Ah yes but the problem is it refreshes every time i click the button. That is it shows the website and then it refreshes for a sec to reload it again. Can this be avoided? – Arthur Apr 08 '21 at 19:51
  • 1
    that's because you're overriding the current src, if it's going to be static, I'd just set the src on the elements attribute and toggle the visibility. – dhazelett Apr 08 '21 at 19:55
  • Yeah that is what I had done. But is there any other way? Because there will be multiple buttons with different src links and I would like to use only one iframe. – Arthur Apr 08 '21 at 19:57
  • I do not believe so, unless you added a check to see if the src matches the current one (ex. `if myIframe.src === newSrc`) – dhazelett Apr 08 '21 at 19:59
  • I am doing it like this ```if(myIframe.src === "www.mywebpage.com") { } else { console.log(myIframe.src); myIframe.src = "www.mywebpage.com"; }``` But it still gets called. The console still gets called. I feel the src gets empty because I close it using ``` myIframe.style.display = 'None';``` – Arthur Apr 08 '21 at 20:07
  • wow very bizarre haha, this is about the limit of my knowledge on weird edge cases with iframes tho – dhazelett Apr 08 '21 at 20:08
  • oh just make sure that you're comparing with `http` or `https` in the string too – dhazelett Apr 08 '21 at 20:09
  • Yes I check with both. The link is exactly the same. – Arthur Apr 08 '21 at 20:12
  • It is very annoying to see that iframe opens the page and then reloads it. – Arthur Apr 08 '21 at 20:12
  • ahh i found it, the issue is no trailing slash on root, see this codepen https://codepen.io/dhazelett/pen/rNjYYed – dhazelett Apr 08 '21 at 20:17
  • Yes that is the issue. Thanks alot :) but if you do find the reason for it to reload then please post it here. For now I shall use this alternative solution :) – Arthur Apr 08 '21 at 20:24