Change iFrame Src with Javascript, JQuery, Dynamically

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, Jul 17 '14 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, Jul 17 '14 at 19:54

score 5 · Answer 1 · answered Jul 17 '14 at 20:10

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/

score 0 · Answer 2 · answered Jul 17 '14 at 19:53

0

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

answered Jul 17 '14 at 19:53

freshsmoe

179
1
14

score 0 · Answer 3 · answered Jul 17 '14 at 19:58

<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'

Change iFrame Src with Javascript, JQuery, Dynamically

3 Answers3

Linked