Внутри этих фреймов можно либо создать свои дополнительные DOM-элементы, например - добавить формы:
$(document).ready(function() {
$('body').after('<iframe id="testIframe" width="1" height="1" align="center"></iframe>');
$('#testIframe').load(function() {
var form = '<form id="testForm" action="test.php" method="post">' +
'<input type="text" name="testInput" value="testValue"/>' +
'</form>';
$(this).contents().find('body').html(form);
});
});
Здесь стоит оговориться: в Opera и Chrome этот пример не прокатит - форма так и не будет добавлена, нужно сразу же после создания фрейма добавлять свою форму (видимо это связано с тем, что в данном случае внутри фрейма документ пуст, ведь мы не указали через тег src на источник, поэтому метод $('#testIframe').load() не отработает должным образом)
Либо загружать другие документы. При этом не засоряется текущая структура документа. В большинстве случаев эти фреймы делают скрытыми, скрывая от глаз пользователей побочную работу веб-приложения. Но при этом встает вопрос: как можно общаться с дочерними фреймами. Если бы повсеместно использовался HTML5, то вопрос этот бы отпал, так как там есть методы для этих целей (
window.postMessage). Но в настоящее время ситуация другая. Можно воспользоваться вот таким нехитрым способом. Во-первых, нам понадобится библиотека - jquery и дополнительный плагин к нему - jquery.form. А далее внутри создать форму, которая может обращаться к серверу. Перед отправкой данных на сервер необходимо передать эту форму методу упомянутого выше плагина ajaxForm. Этот метод позволит нам создать обработчик ответов сервера, что я и сделал, к тому же он доступен родительскому окну, точнее - документу. Так достигается своего рода общение между родительским документом и дочерними скрытыми фреймами:$('#testButton').click(function(){
var ref = $('#testIframe').contents().find('#testForm');
// обработчик на стороне дочернего фрейма
ref.ajaxForm(function(response) {
if (response == 'catched') {
// взаимодействие с "родителем"
$('#result').html('<p>from testIframe1</p>');
}
});
ref.submit();
});
В данных примерах я использую метод $('#testIframe').load(), который удобен тем, что в нем можно использовать свой callback, который будет вызываться только после полной загрузки документа внутри этого фрейма.