Сохранение в скрытое поле из iframe

@Divil · Регистрация: 11.04.2012

Студворк — интернет-сервис помощи студентам

Есть редактор с двумя вкладками(для текста и html):

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...
<td style="border-top: #000 solid 1px;">
   <iframe src="canvas.html" onload="editor_loaded();" scrolling="yes" frameborder="0" id="editor_frame" name="editor_frame" style="width:100%; height:300px;"></iframe>
</td>
</tr>
</table>
</div>
<div id="editor_html" class="show0" style="height: 360px; border: none;">
<table width="100%">
    <tr>
        <td><textarea name="edited_html" id="edited_html" style="width: 600px; height: 340px; border: none; outline: none;"></textarea></td>
    </tr>
</table>
</div>
</div>
        
<textarea name="edit_text" style="display: none;"></textarea>
<input type="submit" value="Отправить" onMouseOver="Save()">...

и код к кнопке:

JavaScript
1
2
3
4
function Save() {
    var text = document.getElementById['editor_frame'].contentWindow.document.body.innerHTML;
    document.getElementByTagName['edit_text'].value = text;
}

но ничего не работает почему-то...
хотя если перейти на вкладку html, и в js написать:

JavaScript
1
2
3
4
function Save() {
    var text = document.getElementById['edited_html'].contentWindow.document.body.innerHTML;
    document.getElementByTagName['edit_text'].value = text;
}

то текст передается...
пробовал вместо

HTML5
1
<textarea name="edit_text" style="display: none;"></textarea>

использовать

HTML5
1
<input name="edit_text" type="hidden">

....но различий не заметно
как можно решить проблему?
Заранее благодарен за помощь!

@kalabuni · 04.02.2014, 16:25

если у вас на странице имеется <iframe id="myIFR"></iframe>,
то document.getElementById ('myIFR') вернёт вам объект текущего документа
и вы можете оперировать им, как и любым иным тегом текущего документа
например, можете изменять свойства стиля, устанавливать или отменять frameBorder или frameSpacing и т.д.

а когда вы хотите получить доступ к документу, загруженному в этот ифрейм, обращаться надо не как к тегу, а как к новому окну, через коллекцию frames, вот так - window.frames ['myIFR']

@Divil · 04.02.2014, 19:46 **[ТС]**

т.е. так будет правильно:

HTML5
1
2
3
4
5
6
<form action="add.php" method="POST" onSubmit="getdown();">
<iframe src="canvas.html" onload="editor_loaded();" scrolling="yes" frameborder="0" id="editor_frame" name="editor_frame" style="width:100%; height:300px;"></iframe>
<textarea name="edited_html" id="edited_html" style="width: 600px; height: 340px; border: none; outline: none;"></textarea>
<textarea name="edit_text" style="display: none;"></textarea>
<input type="submit" value="Отправить" onMouseOver="Save()">
</form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
function editor_loaded() {
    f = document.getElementById("editor_frame");
    f.contentWindow.document.designMode = "on";
    if (f.contentWindow.document.body) {
        f.contentWindow.document.body.innerHTML = document.all("text_to_edit").innerHTML;
        document.all("edited_html").value = document.all("text_to_edit").innerHTML;
    }
}
function Save() {
    var text = window.frames ['editor_frame'].document.body.innerHTML;
    document.getElementByTagName['edit_text'].value = text;
}

Если да, то у меня ничего не получается...

@kalabuni · 04.02.2014, 21:36

у вас набор какого-то бреда, уж извините

1. зачем пользуете contentWindow ?

2. почему в строке #2 у вас правильный кроссбраузерный метод getElementById (), а в строках #5 и #6 вместо него не понимаемая большинством браузеров коллекция document.all ?

3. где элемент с id (или name) равным text_to_edit ?

4. метод document.getElementsByTagName () надо писать правильно
и этот метод возвращает коллекцию (т.е. массив) тегов
а у массива в принципе не может быть value
value может быть у одного какого-то элемента массива

@Divil · 04.02.2014, 22:17 **[ТС]**

1.

Сообщение от kalabuni

у вас набор какого-то бреда, уж извините

на правду не обижаются

2.по правде говоря я этот редактор нашел на просторах интернета, скачал, посмотрел и понял, что он не до конца доделан...и пытаюсь своим малыми знаниями js исправить...так что ответа нет...(там мною написана только функция save)
3: в начале самой страницы есть

HTML5
1
2
<div id="text_to_edit"></div>   
    <div id="editor_blocking" class="editor_blocking"></div>

4: Здесь моя ошибка, метод не совсем тот использовал(хотя изначально правильно было: document.getElementByName()
Но вообщем в редакторе кроме сохранялки все работает...
Поэтому то и прошу помощи...что сам особо не разбираюсь(
Во вложении весь редактор с кодом чтоб понятнее было...

@Divil · 05.02.2014, 00:46 **[ТС]**

и я так понимаю document.all() вообще лучше не использовать?

Сообщение от kalabuni

зачем пользуете contentWindow ?

а чем еще?

@kalabuni · 05.02.2014, 00:59

зачем изобретать велосипед?
возьмите нормальный код

@Divil · 06.02.2014, 17:43 **[ТС]**

не подскажите, почему когда я написал по русски, то в поле вывелись иероглифы разные:

JavaScript
1
2
3
4
5
6
...function validateMode() {
    if (!document.compForm.switchMode.checked) {return true;}
    alert("Снимите галочку \"HTML\".");
    oDoc.focus();
    return false;
}...

кодировка файла utf8 без BOM

Добавлено через 6 часов 12 минут
к скрипту по ссылке добавил:

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
var oDoc, sDefTxt;
 
// После загрузки страницы
function initDoc() {
    oDoc = document.getElementById("textBox");
    sDefTxt = oDoc.innerHTML;
    if (document.compForm.switchMode.checked) {setDocMode(true);}
}
 
function formatDoc(sCmd, sValue) {
    if (validateMode()) {
        document.execCommand(sCmd, false, sValue);
        oDoc.focus();
    }
}
 
function validateMode() {
    if (!document.compForm.switchMode.checked) {return true;}
    alert("Снимите галочку \"HTML\".");
    oDoc.focus();
    return false;
}
 
function setDocMode(bToSource) {
    var oContent;
    if (bToSource) {
        oContent = document.createTextNode(oDoc.innerHTML);
        oDoc.innerHTML = "";
        var oPre = document.createElement("pre");
        oDoc.contentEditable = false;
        oPre.id = "sourceText";
        oPre.contentEditable = true;
        oPre.appendChild(oContent);
        oDoc.appendChild(oPre);
    } else {
        if (document.all) {
            oDoc.innerHTML = oDoc.innerText;
        } else {
            oContent = document.createRange();
            oContent.selectNodeContents(oDoc.firstChild);
            oDoc.innerHTML = oContent.toString();
        }
        oDoc.contentEditable = true;
    }
    oDoc.focus();
}
 
function printDoc() {
    if (!validateMode()) {return;}
    var oPrntWin = window.open("","_blank","width=1200,height=800,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
    oPrntWin.document.open();
    oPrntWin.document.write("<!Doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
    oPrntWin.document.close();
}
 
/* Вставить таблицу */
function open_dialog(dialog, first_field) {
    var f = document.getElementById('dialog_'+dialog).style;
    f.display = "block";
    f.position = "absolute";
    f.top = "100px";
    f.left = "500px";
    f.background = "#71a6d2";
}
function close_dialog(dialog) {
    var f = document.getElementById('dialog_'+dialog).style;
    f.display = "none";
}
function insert_table() {
    CTD = '';
    for (i=0; i<document.getElementById('dialog_addtable').cols.value; i++) {
        CTD = CTD+'<td>&nbsp;</td>';
    }
    CTR = '';
    for (i=0; i<document.getElementById('dialog_addtable').rows.value; i++) {
        CTR = CTR+'<tr>'+CTD+'</tr>';
    }
    PasteHTML('<table width='+document.getElementById('dialog_addtable').tabwidth.value+' border='+document.getElementById('dialog_addtable').tabborder.value+'>'+CTR+'</table>');
}
/* ??? */
function PasteHTML(html) {
    if (validateMode()) {
        oDoc.pasteHTML(html);
        oDoc.focus();
    } else {
        formatDoc('insertHTML', html);
    }
}

HTML5
1
2
3
4
5
6
7
8
9
10
<fieldset id="dialog_addtable" class="dialog">
    <legend>Вставка таблицы</legend>
    <label>Количество столбцов</label>&nbsp;<input type="text" name="cols" class="input_text" maxlength="2" value="3"><br><br>
    <label>Количество строк</label>&nbsp;<input type="text" name="rows" class="input_text" maxlength="2" value="3"><br><br>
    <label>Ширина таблицы</label>&nbsp;<input type="text" name="tabwidth" class="input_text" maxlength="4" value="100%"><br><br>
    <label>Толщина границ</label>&nbsp;<input type="text" name="tabborder" class="input_text" maxlength="2" value="0"><br><br>
    <input type="button" value="Вставить" class="button" onClick="close_dialog('addtable'); insert_table();">&nbsp;
    <input type="button" value="Отмена" class="button" onClick="close_dialog('addtable');">
</fieldset>
<img class="intLink" title="Вставить таблицу" src="https://www.cyberforum.ru/images/table.gif" onClick="open_dialog('addtable', 'cols');">

можете посоветовать как реализовать правильно функцию PasteHTML(html)?

Добавлено через 17 часов 41 минуту
может кто помочь разобраться?

@Divil · 09.02.2014, 21:49 **[ТС]**

или может кто хотя бы разъяснить ниже указанный код так, чтобы баран понял?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function editor_get_range() {
    if (document.selection) {
        editor_frame.focus();
        editor_range = editor_frame.document.selection.createRange();
    } else if (document.getSelection) {
        editor_range = document.getElementById("editor_frame").contentWindow.getSelection().getRangeAt(0).cloneRange();
    } else {
        alert('Браузер не поддерживает эту функцию');
        editor_range = false;
    }
}
 
function editor_PasteHTML(html) {
    if (editor_range.pasteHTML) {
        editor_frame.focus();
        editor_range.pasteHTML(html);
        editor_range.select();
    } else {
        editor_FormatText('insertHTML', html);
    }
}

а то я читал...но нифига не понял про range, selection???

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

Сохранение в скрытое поле из iframe

Решение

Решение

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	04.02.2014, 16:25
	Сообщение было отмечено Taatshi как решение Решение если у вас на странице имеется <iframe id="myIFR"></iframe>, то document.getElementById ('myIFR') вернёт вам объект текущего документа и вы можете оперировать им, как и любым иным тегом текущего документа например, можете изменять свойства стиля, устанавливать или отменять frameBorder или frameSpacing и т.д. а когда вы хотите получить доступ к документу, загруженному в этот ифрейм, обращаться надо не как к тегу, а как к новому окну, через коллекцию frames, вот так - window.frames ['myIFR'] 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	04.02.2014, 21:36
	Сообщение было отмечено Taatshi как решение Решение у вас набор какого-то бреда, уж извините 1. зачем пользуете contentWindow ? 2. почему в строке #2 у вас правильный кроссбраузерный метод getElementById (), а в строках #5 и #6 вместо него не понимаемая большинством браузеров коллекция document.all ? 3. где элемент с id (или name) равным text_to_edit ? 4. метод document.getElementsByTagName () надо писать правильно и этот метод возвращает коллекцию (т.е. массив) тегов а у массива в принципе не может быть value value может быть у одного какого-то элемента массива 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	05.02.2014, 00:59
	зачем изобретать велосипед? возьмите нормальный код 1