Change iFrame Src with Javascript, JQuery, Dynamically [duplicate]

Question

I have been trying for the last few hours to change the src of an iFrame. It seems like a simple task but for some reason after hundreds of attempts and reading quite a few other questions and answers on stack, I still find myself without being able to change the src of an iFrame. As you can see from the code below i have attempted this quite a few times. What am I doing wrong?

    <body>

       <p><iframe src="http://localhost/ok.html" name="myFrame" width="500" marginwidth="0"     height="500" marginheight="0" align="middle" scrolling="auto"></iframe>


<script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    function loadPages(){
        var loc = "http://localhost/morningmarketweb/index.html";

        //var myIframe = document.getElementById("myFrame");

        //window.frames[myIframe].location = "http://localhost/morningmarketweb/index.html";

        // $(myIframe).load('http://localhost/morningmarketweb/index.html');

        // document.getElementId('myFrame').src="google.com";

       // var myIframe = document.getElementById('myFrame');
       // myIframe.src=loc;


        //$('#myFrame').attr('src', loc);

        document.getElementById('myFrame').setAttribute('src', loc);


    }
    </script>
    </body>

@Garis & Ben: It can't be a duplicate if I am asking "What I Did Wrong". If it is a duplicate then you are saying that somehow these other individuals knew ahead of time, deep into the future, that I would be asking what I would be doing wrong. I do not think that is possible. — Ty Jacobs
– Ty Jacobs, Commented Jul 17, 2014 at 19:53
Rahil, that is correct. I kept looking at the name. I checked for that a million times but never caught the id="myFrame" missing. — Ty Jacobs
– Ty Jacobs, Commented Jul 17, 2014 at 19:54

Karla Hernandez · Accepted Answer · 2014-07-17 20:10:44Z

5

Here is the code:

<iframe src="http://jquery.com/" id="myFrame" width="500" marginwidth="0" height="500" marginheight="0" align="middle" scrolling="auto"></iframe>
<button onclick="loadPages()">Click Me</button>
<script>
    function loadPages(){
        var loc = "http://es.learnlayout.com/display.html";
        document.getElementById('myFrame').setAttribute('src', loc);
    }
</script>

As you can see, first issue was that you are asking for an element by Id... well, then you need to specify an Id. Second issue, you need to have an element who fires the action "loadPages"... so you can set a button for it.

Here is also the functional example:

http://jsfiddle.net/littapanda/Jsc4E/

answered Jul 17, 2014 at 20:10

Karla Hernandez

3815 silver badges14 bronze badges

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

1 Comment

wubblyjuggly Over a year ago

Great worked for me!

freshsmoe · Accepted Answer · 2014-07-17 19:53:48Z

0

name is not Id. Set Id="myFrame" and this will work: $('#myFrame').attr('src', loc);

answered Jul 17, 2014 at 19:53

freshsmoe

1794 silver badges15 bronze badges

Comments

ratiorick · Accepted Answer · 2014-07-17 19:58:24Z

0

<iframe src="http://localhost/ok.html" name="myFrame" width="500" marginwidth="0"     height="500" marginheight="0" align="middle" scrolling="auto" id="myFrame"></iframe>

<script>

document.getElementById('myFrame').src = "http://someurl.com";

</script>

// also based on your code above , you didn't have an ID on your Iframe - so i added id='myIframe'

answered Jul 17, 2014 at 19:58

ratiorick

7765 silver badges8 bronze badges

Collectives™ on Stack Overflow

Change iFrame Src with Javascript, JQuery, Dynamically [duplicate]

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related