Using Javascript to control navigation of iFrame not applying src property

Question

So I am making a page which will allow me to render outside pages, so that I can begin to manipulate data and refresh content periodicly (ideally, not what this is about though).

So my problem is that I have a little javascript to call pages to load to my iframe, but when I attempt to apply my url to the src attribute of my iframe, it doesn't seem to stick, and no outside page loads. I have been testing this using my own website, so there should be no restrictions in place from that url location to prevent it from loading. I am not sure if the page needs to reload (possibly?) for the iframe to change its src? If so, my idea will be totally unfeasible, so I hope that isn't the issue. Here is my code thus far:

<head>
<style>body{text-align:center;}#targetField{width:80%;margin:3px;}</style>
<script>
var frames = new Array();
var url;
function direct(url){
  frames = document.getElementsByTagName('iframe');//Obtain all iframe elements
  for(i=0;i<frames.length;i++){//For each frame      
    //IF the frames source element is blank or null
    if(frames[i].getAttribute('src') === null || frames[i].getAttribute('src') === 'null' || frames[i].getAttribute('src') === ''){
        frames[i].setAttribute('src', url);
    }
    else if(frames[i].getAttribute('src') === url){
      //IF the souce element already has a target and is SAME as url
      if(navigator.appName == 'Microsoft Internet Explorer'){
        //If IE then use reload()
        frames[i].contentWindow.location.reload(true);
      }
      else{
        //Otherwise set source to reload
        frames[i].src = frames[i].src
      }
    }
    else{}
  }
}
</script>
</head>
<body>
<form>
  <input id="targetField"></input>
  <button onclick="direct(document.getElementById('targetField').value);" value="submit">GO!!!</button>
</form>
<iframe id="iF01"></iframe></body></html>

I would rather do this with pure javascript without using any jQuery if possible, I am just not sure why my debug console shows no issues, but does nothing. Tested in Chrome, FF and IE8. JSFiddle here http://jsfiddle.net/77tx44od/2/

I have also tried this now, to no avail, creating a new iFrame to load the content via its src attribute.

<script>
var frames = new Array();
var url;
var x = 0;
function direct(url){ 
  frames = document.getElementsByTagName('iframe');//Obtain all iframe elements
  for(i=0;i<frames.length;i++){//For each frame
    frames[i].parentnode.removeChild(frames[i]);
  }  
  var newFrame = document.createElement('iframe');
  newFrame.setAttribute('src', url);
  newFrame.setAttribute('id', 'iF'+x);
  document.body.appendChild(newFrame);
  x++;
}   
</script>

you've got iframe[i] where you should have frames[i] - that does indeed produce an error in the developer console. — Pointy
– Pointy, Commented Aug 31, 2014 at 13:01
ah, stupid me. Didn't show up in my chrome console though, which is weird. — Thomas Cheney
– Thomas Cheney, Commented Aug 31, 2014 at 13:02

mplungjan · Accepted Answer · 2014-08-31 15:16:55Z

1

You cannot inquire what is in an iframe after a page from a different origin has loaded, nor can you change its src due to cross origin security. Your best bet is give a name to the iframe and use window.open(URL,iframeName) thereafter.

It is an idea to replace the iframe with a new one with another src.

It might be blocked to load a page in an iframe - it can very likely try to bust out

Here is a replace version:

FIDDLE

<form id="form1">
  <input id="targetField"></input>
  <button value="submit">GO!!!</button>
</form>
<div id="iframeDiv">
<iframe id="iF01"></iframe></div>

window.onload=function() {
    document.getElementById("form1").onsubmit=function() {
      document.getElementById("iframeDiv").innerHTML='<iframe src="'+this.targetField.value+'"></iframe>';
      return false; // cancel form submission
    }
}

edited Aug 31, 2014 at 15:16

answered Aug 31, 2014 at 13:12

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

5 Comments

Thomas Cheney Over a year ago

What if the iFrame were being created, and give it's src attribute before appending to the page, then instead of reloading I just replaced the iFrame with a new one? Although that still means I cannot access the info, lame.

Thomas Cheney Over a year ago

May be flagged as a security issue too, Chrome creates the element, then promptly removes it before content can load.

mplungjan Over a year ago

Works for me in Chrome on OSX

Thomas Cheney Over a year ago

That method works great, my thanks. My response was from trying to appendChild() a new iframe element, not writing to the page with innerHTML. One question, what is the purpose of return false; in the function?

mplungjan Over a year ago

To not submit the form.

Collectives™ on Stack Overflow

Using Javascript to control navigation of iFrame not applying src property

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related