javascript - Mobile Safari and iFrame src attribute - Stack Overflow

admin管理员组

文章数量:1431420

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.

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.

• javascript
• iframe
• mobile-safari

Share Improve this question Follow edited Jun 26, 2012 at 14:04 ldiqual 15.4k77 gold badges5555 silver badges9494 bronze badges asked Jun 22, 2011 at 23:09 Scott DietrichScott Dietrich 68622 gold badges88 silver badges2121 bronze badges 5

• Have you tried modifying with either contentWindow.location = url or setAttribute("src", url)? – johnmdonahue Commented Jun 22, 2011 at 23:44
• 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 Commented Jun 23, 2011 at 23:20
• 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 Commented Jun 27, 2011 at 21:14
• 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 Commented Jun 27, 2011 at 21:50
• 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 Commented Jun 28, 2011 at 19:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

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

本文标签： javascriptMobile Safari and iFrame src attributeStack Overflow