Question

I am trying to set the ‘src’ attribute for an iFrame. It works great on FireFox and Internet Explorer. However, when testing on iPad mobile safari changing the ‘src’ attribute doesn’t do anything.

I have an iFrame that has it’s ‘src’ attribute set in the HTML.

<iframe id="iFrame0" style="margin: 0px; overflow: hidden; padding: 0px; height:80px; width:500px" src='.../loading.gif' frameborder="0"></iframe>

Later on I have some code that tries to change the src

var iFrame0 = YAHOO.util.Dom.get('iFrame0');
YAHOO.util.Event.addListener(iFrame0, 'load', function() { alert('test'); });
MyWebService.GetDynamicUrl('someparam', function(url) {
  iFrame0.src = url;
});

Not only does the event not fire, but the content of the URL doesn’t change. In my testing I noted that the value iFrame0.src does change to the newly passed in URL, but the content on the page does not change.

I am using YUI, however, to eliminate that as a potential problem in my testing I have also tried to directly access the iFrame via:

document.getElementById('iFrame0').attribute("src") = '..../newurl.gif';

Still doesn’t work.

Answer 1

In the end I solved this by dynamically creating the iframe and attaching it to the DOM. I also added a timestamp to the id and src attributes in order ensure no caching is being done (though I’m unsure if that truly is necessary).

var elIFrame = document.createElement("iframe");
var dt = new Date();
elIFrame.src = APP_IMAGEPATH + "/loading.gif?dt=" + dt.getTime();
elIFrame.id = 'newCard2' + dt.getTime();
elIFrame.frameBorder = 0;
elIFrame.scrolling = "no";
elIFrame.style.width = "500px";
elIFrame.style.height = "1.8em";
YAHOO.util.Dom.insertAfter(elIFrame, this.pre + "cardMask");