How do you populate an iframe source with a variable?

Question

I am trying to set my current iframe source with a variable that I created but it doesn't seem to work. I figured that my JavaScript syntax is wrong.

My script is:

            <script type="text/javascript">
              $(document).ready(function(){
                var iframeAttributes = window.location.search; 
                var iframeForm = 'www.test.com/form.html';
                var iframeURL = iframeForm + iframeAttributes; 
                $('.testframe').attr('src', iframeURL);
              });
            </script>

My IFrame code is:

            <iframe id="testframe" src="" width="600" height="586" frameBorder="0">></iframe>

Have you looked at it in the Element inspector of your browser's developer tools? Is the src set? Do you see the request for the URL in the Network tab? Is it the URL you expect? Do you get the response you expect? — Quentin
– Quentin, Commented May 10, 2016 at 18:47

XCS · Accepted Answer · 2016-05-10 18:47:10Z

1

Your selector is wrong:

$('.testframe').attr('src', iframeURL);

This tries to find elements with class testframe but you have set the ID in your HTML, not the class.

Use this to select the element with id testIframe:

$('#testframe').attr('src', iframeURL);

answered May 10, 2016 at 18:47

XCS

28.3k28 gold badges105 silver badges155 bronze badges

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

Comments

yezzz · Accepted Answer · 2016-05-10 18:56:56Z

1

Include the protocol http: or https:

<script type="text/javascript">
$(document).ready(function(){
    var iframeAttributes = window.location.search; 
    var iframeForm = 'http://www.test.com/form.html';
    var iframeURL = iframeForm + iframeAttributes; 
    $('#testframe').attr('src', iframeURL);
});
</script>

answered May 10, 2016 at 18:56

yezzz

3,0381 gold badge12 silver badges20 bronze badges

1 Comment

yezzz Over a year ago

It may also work without the protocol if you use the leading //

Bubble Hacker · Accepted Answer · 2016-05-10 19:23:00Z

0

Use a function so you can apply it to any iframe you want:

function changeIframeSrc(id, source){
      $(id).attr('src', source);
}

Example of usage:

changeIframeSrc("#iframe_tab", "http://google.com"); //Notice you can also pass a class into the function instead of an id

answered May 10, 2016 at 19:23

Bubble Hacker

6,7231 gold badge19 silver badges26 bronze badges

Collectives™ on Stack Overflow

How do you populate an iframe source with a variable?

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related