Mobile Safari and iFrame src attribute

3
votes

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.

2
javascriptiframemobile-safari
Have you tried modifying with either contentWindow.location = url or setAttribute("src", url)? - johnmdonahue
I tried setAttribute (both YUI and off of the DOM). Didn't work. I tried contentWindow.location and contentWindow.location.href. Didn't work. - Scott Dietrich
I have continued to try other things... I tried changing the 'name' attribute as mentioned here: link. I have also tried setting it like so: window.frames[0].location = '....newurl.gif'. Still neither has helped. - Scott Dietrich
This is really oddto me. I haven't run into this problem and have dynamically injected and modified the src of iFrames on mobile safari on a regular basis. Could you maybe post a link to your code or provide a link to a jsfiddle? I'm curious about what's going on here. Have you tried it on other iOS versions. 3.2 mobile safari is definitely buggy. Does it work on iPhone or iOS > 3.2? - johnmdonahue
I just tested recently on an iPhone with iOS > 4.0. Doesn't work there either. Sadly, the site is on an intranet, so I can't post a link to it. I'll continue to plug away :) - Scott Dietrich

2 Answers

3
votes

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

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