Как запустить функцию сразу после загрузки содержимого iframe?

Question

Я сейчас использую:

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 (т. Е. Без ожидания другого содержимого в приложении)? Я попытался заменить все window на document, но это не работает (ничего не делает).

Мне нужно получить доступ к элементам внутри iframe и изменить их атрибуты.

Answer 1

HTML

Этот метод просто использует атрибут onload для вызова функции после загрузки содержимого кадра.

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

Очевидно, убедитесь, что функция on_iframe_load(_this) присутствует в вашем коде JS. Чтобы объяснить далее, почему мы передаем this в on_iframe_load(), следует понимать, что передача this из элемента DOM передаст ссылку на элемент.

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

Чистый JS

Если HTML не плавает на вашей лодке, вы можете использовать onload или addEventListener("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>