change the src of an iframe using javascript

Question

<table>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>four</td>
  </tr>
</table>

<div id="numbers">
  <iframe name="letters" src="">
  </iframe>
</div>

I'd like to have the ability to click on any cell in the table, grab the value inside, show the div and append the iframe src based on the cell's value. When the user clicks on the cell again the iframe becomes blank and the div is hidden.

For example: click cell one, show the div with the iframe src="/one.html". Click it again, hide the div with a blank iframe.

Thanks in advance!

(Please, no jQuery answers.)

document.querySelector('iframe').src='http://y-u-no-search.internet'; — c69
– c69, Commented Jan 5, 2012 at 0:16

rekire · Accepted Answer · 2012-01-04 23:56:06Z

4

Without adding an id to the iframe use this:

document.getElementsByTagName("iframe")[0].src="http://example.com/";

Or based on the name:

document.getElementsByName("letters")[0].src="http://example.com/";

If you would add a id:

<iframe name="letters" id="letterframe" src="" />

document.getElementById("letterframe").src="http://example.com/";

answered Jan 4, 2012 at 23:56

rekire

48.1k34 gold badges184 silver badges279 bronze badges

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

1 Comment

Alex Over a year ago

Assuming the DOM only contains one iframe element.

user319198 · Accepted Answer · 2012-01-05 00:09:02Z

0

It should be something like below.Call this function on onclick event of td and pass desired src in parameter.

  <script type=”text/javascript”>
    function changeURL(srcvalue)
    {
    document.getElementById('letters').src=srcvalue;
    }
    </script>

answered Jan 5, 2012 at 0:09

user319198

2 Comments

user319198 Over a year ago

@rekire : go through standard attribute list in this w3schools.com/tags/tag_iframe.asp link. Your all doubts will be cleared. BTW If have this info them why you used id attribute in ur answer ?

rekire Over a year ago

Sorry a little error of me. I mean the iframe has no id attribute set.

qw3n · Accepted Answer · 2012-01-05 00:12:39Z

Added ids to some of the HTML elements.

<table id="table">
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>four</td>
  </tr>
</table>

<div id="numbers">
  <iframe id="iframe" name="letters" src="">
  </iframe>
</div>

And the javascript

document.getElementById('table').onclick=function(e){
  e = e || window.event;
  e=e.target || e.srcElement;
  if(e.tagName.toLowerCase()=='td'){
    var page = e.innerHTML,iframe=document.getElementById('iframe');
    if(iframe.src.indexOf(page)>-1){
      document.getElementById('numbers').style.display='none';
    }
    else{
      document.getElementById('numbers').style.display='block';
      iframe.src='/'+page+'.html';
    }
  }
}

Collectives™ on Stack Overflow

change the src of an iframe using javascript

3 Answers 3

1 Comment

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Related