Выполнить код JavaScript в iframe после загрузки iframe?

Question

Я хочу, чтобы иметь возможность выполнять код внутри чужих страниц.

Вот пример для облегчения понимания:

Допустим, я хочу, чтобы изменить цвет некоторых IFrame страницы после ее загрузки:

document.body.style.backgroundColor = "#AAAAAA"; 

document.getElementById('targetFrame').contentWindow.targetFunction(); 

Answer 1

Если это чужая страница. Вы просто не можете этого сделать без какого-либо сотрудничества со стороны другой стороны. Подумайте о последствиях для безопасности в Интернете, если случайные люди, такие как вы, могут произвольно запускать код против приложений, написанных другими разработчиками? Хотя я уверен, что у вас хороший характер, достаточно людей с низким моральным уровнем, где это будет огромной проблемой для обеспечения безопасности данных.

С учетом этого существуют исключения из этого правила безопасности; Однако.

Например, если другой веб-разработчик дает вам право выполнять код на своей странице, вы можете использовать API-интерфейс HTML5 window.postMessage для передачи сообщения из одного контекста в другой, а затем выполнить команду, когда это сообщение получен.

Чтобы уточнить это, требуется, чтобы другой разработчик зарегистрировал слушателя на своем веб-сайте для прослушивания событий, отправленных с вашего сайта.

код на сайте вашего коллеги:

// register to listen for postMessage events 
window.addEventListener("message", changeBackground, false); 

// this is the callback handler to process the event 
function changeBackground(event) 
{ 

    // you're colleage is responsible for making sure only YOU can 
    // make calls to his/her site! 
    if (event.origin !== "http://example.org:8080") 
    return; 

    // event.data could contain "#AAAAAA" for instance 
    document.body.style.backgroundColor = event.data; 
    // do other stuff 
    } 
} 

Ваш код:

// pass the string "#AAAAAA" to the iframe page, where the changeBackground 
// function will change the color 
document.getElementById("theIframe").contentWindow.postMessage("#AAAAAA", targetOrigin); 

Для того, чтобы выполнить этот код при IFrame завершении загрузки, вы, конечно, нужно быть в состоянии обнаружить это, что может быть выполнено либо с использованием iframe's load event, либо с помощью вашего коллеги use postMessage in reverse, to notify you to fire your event..

Для получения дополнительной информации ознакомьтесь с HTML5 Specification on Web Messaging.