动态设置 iframe 的 src

Question

我有一个程序，它将动态设置iframe的src来加载页面。 我需要为页面完全加载挂钩事件处理程序。 我该怎么做？谢谢！

我有一个程序会动态地设置iframe的src来加载页面。我需要挂载一个事件处理程序来处理页面完全加载后的情况。请问如何实现？谢谢！

- Dagang

Answer 1

<script type="text/javascript">
function iframeDidLoad() {
    alert('Done');
}

function newSite() {
    var sites = ['http://getprismatic.com',
                 'http://gizmodo.com/',
                 'http://lifehacker.com/']

    document.getElementById('myIframe').src = sites[Math.floor(Math.random() * sites.length)];
}    
</script>
<input type="button" value="Change site" onClick="newSite()" />
<iframe id="myIframe" src="http://getprismatic.com/" onLoad="iframeDidLoad();"></iframe>

示例在http://jsfiddle.net/MALuP/上。

- simonbs

---

这个回答中的链接已经失效。重新上传到http://www.jsfiddle.net可能会有帮助，然后再发布该网址的链接。 - Anderson Green

好主意。我刚刚改了它。 - simonbs

Answer 2

试试这个：

top.document.getElementById('AppFrame').setAttribute("src",fullPath);

- Deepika

---

很好用！示例链接：<a onClick="top.document.getElementById('iframe_id').setAttribute('src','https://photosonthefly.com');" >随时随地的照片</a>这种方法需要一个CSS指针，例如<style>a:hover {cursor: pointer;}</style>。 - Eric P

Answer 3

试试这个...

function urlChange(url) {
    var site = url+'?toolbar=0&navpanes=0&scrollbar=0';
    document.getElementById('iFrameName').src = site;
}

<a href="javascript:void(0);" onClick="urlChange('www.mypdf.com/test.pdf')">TEST </a>

- Sunny

Answer 4

你还需要考虑到在某些Opera版本中，onload事件会被触发多次，因此需要添加一些钩子：

// fixing Opera 9.26, 10.00
if (doc.readyState && doc.readyState != 'complete') {
    // Opera fires load event multiple times
    // Even when the DOM is not ready yet
    // this fix should not affect other browsers
    return;
}

// fixing Opera 9.64
if (doc.body && doc.body.innerHTML == "false") {
    // In Opera 9.64 event was fired second time
    // when body.innerHTML changed from false
    // to server response approx. after 1 sec
    return;
}

代码源自Ajax上传

- Suor

---

另外，如果您正在使用jQuery，您可以为iframe绑定load事件处理程序 $('iframe').load(function (){ ...do smth... })。 - Suor

Answer 5

尝试使用此代码。然后，“formId” div可以设置图像。

$('#formId').append('<iframe style="width: 100%;height: 500px" src="/document_path/name.jpg"' +
 'title="description"> </iframe> ');

- Chamod Wijesena

Answer 6

试试这个：

document.frames["myiframe"].onload = function(){
   alert("Hello World");
}

- Headshota

---

document.frames 不是有效的 JavaScript。parent.frames 可能是一个选项，但似乎在 JavaScript 中访问 iframes 的最佳方式确实是使用 getElementById。 - Ray Hulha