javascript - Mobile Safari 和 iFrame src 属性

Question

我正在尝试为 iFrame 设置“src”属性。它在 FireFox 和 Internet Explorer 上运行良好。但是，在 iPad 移动版 safari 上进行测试时，更改“src”属性不会执行任何操作。

我有一个在 HTML 中设置了“src”属性的 iFrame。

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

还是不行。

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