Приколы с iframe

NT Man · №1

Код:

function AJAXRequest2(url, param, formObj) {
    var iframe = createIFrame();      
    var iform = formObj.cloneNode(true);
    var ibody = window.frames[iframe.id].document.getElementsByTagName("body")[0];
    alert(ibody);
    window.frames[iframe.id].document.getElementsByTagName("body")[0].appendChild(iform);
}

Этот небольшой кусочек кода всего лишь копирует форму в iframe. Да кстати если его написать как здесь, то он даже работает!
Самое интересное начинается в Firefox-е, если начать приводить код в порядок.

Выкидываем alert, все перестает работать.

Выделить код

Код:

function AJAXRequest2(url, param, formObj) {
    var iframe = createIFrame();      
    var iform = formObj.cloneNode(true);
    var ibody = window.frames[iframe.id].document.getElementsByTagName("body")[0];
    window.frames[iframe.id].document.getElementsByTagName("body")[0].appendChild(iform);
}

или пытаемся записать оптимальнее

Выделить код

Код:

function AJAXRequest2(url, param, formObj) {
    var iframe = createIFrame();      
    var iform = formObj.cloneNode(true);
    var ibody = window.frames[iframe.id].document.getElementsByTagName("body")[0];
    alert(ibody);
    ibody.appendChild(iform);
}

опять не работает....

Зато в Google Crome и Opera работает даже такой код!

Выделить код

Код:

function AJAXRequest2(url, param, formObj) {
    var iframe = createIFrame();      
    var iform = formObj.cloneNode(true);
    var ibody = window.frames[iframe.id].document.getElementsByTagName("body")[0];
    ibody.appendChild(iform);
}

Это что глюки лиса или я что-то не понимаю??

Вообще конечная цель заставить клонированную в iframe форму сабмитить данные.

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

Выделить код

Код:

function AJAXRequest2(url, param, formObj) {
    var iframe = createIFrame();      
    var iform = formObj.cloneNode(true);
    var ibody = window.frames[iframe.id].document.getElementsByTagName("body")[0];
//    alert(ibody);
    ibody.appendChild(iform);
    iform.target = iframe.id;
    //window.frames[frame.id].document.getElementsByTagName("form")[0].Submit();
    var oForm = window.frames[iframe.id].document.getElementsByTagName("form")[0];
//    alert(oForm);
    oForm.submit();
}

NT Man · №2

Выделить код

Код:

function AJAXRequest2(url, param, formObj) {
    var iframe = createIFrame();         
    var idocument = window.frames[iframe.id].document;
    var iform = idocument.importNode(formObj, true);
    var ibody = idocument.getElementsByTagName("body")[0];
    ibody.appendChild(iform);
    idocument.getElementById('ttt').click();
}

Допилил

В место cloneNode следовало использовать importNode.

Но проблемы не все решены:
1) В браузерах на базе WebKit форма копируется без параметров. Т.е. В форме на сайте скажем выбрали файл. Далее я копирую форму с этим параметром в iframe и оттуда делаю уже запрос, тем самым реализую закачку файла в фоне. Но теперь это довести до логического конца мешает WebKit. Гуру ау, кто хорошо WebKit знает?

2) Не понимаю почему, когда убираю строчку idocument.getElementById('ttt').click(); в FireFox-се не вижу результата копирования формы. Хотя когда стоит idocument.getElementById('ttt').click(); данные даже приходят как надо от сервера. Ну не могу пока понять этот момент. (В опере, хроме, сафари все прекрасно видно, что и как копируется, в частности видно, что в браузерах на базе WebKit поля формы не переносятся.)
Firebug тоже говорит что iframe пустой, хотя если добавить в конец строчку alert(idocument.getElementById('ttt').name); то будет видно что все врут и на самом деле в iframe все есть.

Lynn · №3

А обязательно клонировать форму?

Проще выдать iframe'у имя, а у формы дописать target="имя" и просто сабмитить никуда не копируя/клонируя.

NT Man · №4

Lynn пишет

А обязательно клонировать форму?Проще выдать iframe'у имя, а у формы дописать target="имя" и просто сабмитить никуда не копируя/клонируя.

Так уже работает, хочется большего. Это для того, чтобы поставить на закачку файл на одной страничке и пойти гулять дальше по сайту. А потом вернуться и увидеть, что файл закачался. P.S. сайт полностью аяксовый. Если ограничиться изменением target, то как только форма перетрется JavaScripto-м закачка прекращается.

Lynn · №5

Закачка должна прекращаться, если iframe убить. А наличие формы не должно влиять на закачку. Но проверять лень

NT Man · №6

iframe у меня убиваться автоматом после получения ответа от сервера. Для каждого нового запроса создается новый iframe. Может конечно тут дело в другом, но согласитесь тема интересная. А насчет копирования, согласитесь, глюкаво в Fox-се, если содержимое iframe не видит ни firebug ни Geko, а скриптом оно прекрасно находиться.

Отредактировано NT Man (09-08-2009 17:39:54)

NT Man · №7

Lynn в общем Вы оказались правы решил добить.

Ниже полный пример для изучения работы обоих методов отправки.

index.html

Выделить код

Код:

<html>
<head>
<script language="javascript"> 

function init() {
	var formObj = document.getElementById('fff');
	formObj.onclick = ajaxsubmit;
}

function createIFrame() {
  var id = 'f' + Math.floor(Math.random() * 99999);
  var div = document.createElement('div');
  div.innerHTML = '<iframe  src="about:blank" id="'+id+'" name="'+id+'" onload="sendComplete(this)"></iframe>';
  document.body.appendChild(div);
//  return document.getElementById(id).contentWindow.document;  
//  return document.getElementById(id).contentWindow.document.getElementById( 'idElement' );
  return document.getElementById(id);
}


function AJAXRequest(url, param, formObj) {
    var iframe = createIFrame();      
    formObj.target = iframe.id;
	alert('Запрос 1 готов');
}

function AJAXRequest2(url, param, formObj) {
    var iframe = createIFrame();         
//    var idocument = window.frames[iframe.id].document;
//	document.getElementById( 'idIframe' ).contentWindow.document.getElementById( 'idElement' )
    var idocument = iframe.contentWindow.document;
    var iform = idocument.importNode(formObj, true);
    var ibody = idocument.getElementsByTagName("body")[0];
    ibody.appendChild(iform);
	alert('Запрос 2 готов');
    idocument.getElementById('ttt').click();
}


function ajaxsubmit(event) { 
	event = event || window.event;
	var oSubmit = event.target || event.srcElement;
	if (oSubmit.type != 'submit') return;
//	window.location.hash = this.action.replace(/^.*?\?/,'#');
	if (oSubmit.name == 'submit1')
	  AJAXRequest(this.action, oSubmit.name + "=" + encodeURI(oSubmit.value), this);
	else {
	  AJAXRequest2(this.action, oSubmit.name + "=" + encodeURI(oSubmit.value), this);
	  return false;
	}
};  

function killform() { 
	var divObj = document.getElementById('ccc');
	divObj.innerHTML = 'Все!';
}

</script>
</head>
<body onload = "init()">
<div id="ccc">
<form id="fff" name="myForm" action="upload.php" method="post" enctype="multipart/form-data">
<input type='file' name='file'/>
<input type='text' name='text' value='бу'/>
<input id='tt1' type='submit' name='submit1' value='закачать метод 1'/>
<input id='ttt' type='submit' name='submit2' value='закачать метод 2'/>
</form>
</div>
<input type="button" value="Kill form" onclick="killform();"/>
</body>
</html>

upload.php

Выделить код

Код:

<?php
  print_r($_FILES);
  print_r($_POST);
?>

Полезная информация

№107-08-2009 20:27:22