Mobile Safari and iFrame src attribute

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");

Answer 2

Are you sure that the variable iFrame0 is actually pointing the iFrame DOM object and not some empty object or other element using the same ID (a DIV for example)? Maybe you could try to check the initial src to see if it's what you expect (i.e. '.../loading.gif').

Try to access the frame with the following:

var frameObj = document.frames ? document.frames['iFrame0'] : document.getElementById('iFrame0'),
    frameWin = frameObj.contentWindow || frameObj;

And then try to modify its src:

frameWin.src = '..../newurl.gif';