温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - How to run a function right after contents of an iframe are loaded?
html iframe javascript

javascript - 加载iframe的内容后,如何立即运行函数?

发布于 2020-03-27 12:02:56

我目前正在使用:

function printThing(){ 
    let link = parent.document.getElementById("oLink").href; 
    console.log(link); 
}

if (window.attachEvent) {window.attachEvent("onload", printThing);} 
else if (window.addEventListener) {window.addEventListener("load", printThing, false);} 
else {document.addEventListener("load", printThing, false);}

要从iframe的内容(使用srcdoc而不是src)获取链接,然后在控制台中进行打印。将此代码发送到前端之前,将添加到一些存储的html中。

加载iframe内容后,是否有办法触发此操作(即,无需等待应用程序中的其他内容)?我想用替换所有的东西windowdocument但它不起作用(它什么也不做)。

我需要从iframe内部访问元素并更改其属性。

查看更多

查看更多

提问者
Mohamad Moustafa
被浏览
49
IMustBeSomeone 2019-07-04 02:59

的HTML

onload一旦加载了框架的内容,此方法仅使用属性来调用函数。

<iframe id="some_frame" onload="on_iframe_load(this)">
    ....
</iframe>

显然,请确保该on_iframe_load(_this)功能在您的JS代码中。为了进一步解释为什么我们通过thison_iframe_load(),了解到通过this从一个DOM元素将通过参考元素。

<script>
var on_iframe_load(_this) = () => {
    _this.contentDocument.getElementById("something_in_this_frame").doWhatever(...);
}
</script>

纯JS

如果HTML没有使您的船浮起,则可以使用onloadaddEventListener("load", ...),然后iframe使用元素指针和contentDocument(没有IE?)访问内部的元素

<script>
document.getElementById("some_frame").onload = function() { // or you could use `addEventListener("load", function(){...})`
    this.contentDocument.getElementById("some_element_in_frame").doThing(...)
}
</script>