Mobile Safari 和 iFrame src 属性

Posted

技术标签:

【中文标题】Mobile Safari 和 iFrame src 属性【英文标题】:Mobile Safari and iFrame src attribute 【发布时间】:2011-06-22 23:09:48 【问题描述】:

我正在尝试为 iFrame 设置“src”属性。它在 FireFox 和 Internet Explorer 上运行良好。但是,在 iPad 移动 safari 上进行测试时,更改 'src' 属性没有任何作用。

我有一个 iFrame,它在 html 中设置了“src”属性。

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

稍后我有一些代码试图更改 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;
);

不仅事件不会触发,而且 URL 的内容也不会改变。在我的测试中,我注意到 iFrame0.src 的值确实更改为新传入的 URL,但页面上的内容没有更改。

我正在使用 YUI,但是,为了消除我测试中的潜在问题,我还尝试通过以下方式直接访问 iFrame:

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

还是不行。

【问题讨论】:

您是否尝试过使用 contentWindow.location = url 或 setAttribute("src", url) 进行修改? 我尝试了 setAttribute(YUI 和 DOM 之外的)。没用。我尝试了 contentWindow.location 和 contentWindow.location.href。没用。 我一直在尝试其他事情...我尝试更改此处提到的“名称”属性:link。我也试过这样设置:window.frames[0].location = '....newurl.gif'。仍然没有帮助。 这对我来说真的很奇怪。我还没有遇到这个问题,并且定期在移动 safari 上动态注入和修改 iFrames 的 src。您能否发布指向您的代码的链接或提供指向 jsfiddle 的链接?我很好奇这里发生了什么。您是否在其他 ios 版本上尝试过。 3.2 mobile safari 肯定有问题。它可以在 iPhone 或 iOS > 3.2 上运行吗? 我最近在 iOS > 4.0 的 iPhone 上进行了测试。在那里也行不通。遗憾的是,该站点位于 Intranet 上,因此我无法发布指向它的链接。我会继续拔掉:) 【参考方案1】:

最后我通过动态创建 iframe 并将其附加到 DOM 解决了这个问题。我还在 id 和 src 属性中添加了时间戳,以确保没有进行缓存(尽管我不确定这是否真的有必要)。

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

【讨论】:

【参考方案2】:

您确定变量 iFrame0 实际上指向 iFrame DOM 对象,而不是某个空对象或其他使用相同 ID(例如 DIV)的元素吗?也许您可以尝试检查初始 src 以查看它是否符合您的预期(即“.../loading.gif”)。

尝试通过以下方式访问框架:

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

然后尝试修改它的src:

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

【讨论】:

我很确定我有正确的 iframe 元素。我一直在我的 javascript 中放置警报语句。奇怪的是,当我执行alert(iFrame0.src); 时,它给了我应该存在的网址(但未在 iFrame 中显示)。 我想知道是否有人对是否值得考虑切换到object 元素有意见。 @Scott 我明白了……很奇怪!请问是不是重绘的问题?您是否尝试过切换 iFrame 的显示属性以查看是否可以强制重绘?此外,通过 Fiddler 或 Charles 代理 iPad 以查看是否确实为替换的 url 发出请求可能会有所帮助?祝你好运!

以上是关于Mobile Safari 和 iFrame src 属性的主要内容,如果未能解决你的问题,请参考以下文章

使用iOS 5 Mobile Safari自动播放音频,还有其他解决方法吗?

Safari 和 Mobile Safari 需要刷新页面才能播放 Howler Audio

Safari 和 Mobile Safari 中的内联 SVG 中断

mobile-safari javascript:多个 setTimeouts 或 setIntervals

iOS 5.1 和 Safari Mobile 限制

在 Safari 和 Mobile Chrome 上以编程方式播放有声视频