Создать блок div из Iframe в основную страницу
 

Доброго времени суток. Помогите пожалуйста решить такую проблему. Есть сайт в таком шаблоне http://learn.javascript.ru/play/7g1yB

В синем блоке div вложен Iframe который перегружается из ссылок блока menu. В странице, которую представляет iframe есть картинки, при клике по которым в тело body создается дополнительный div блок

function DopInfo(elem){
var d=document.createElement('div');
d.className='dopInfoCSS'
d.style.left = "300px"
d.style.top = "100px"
document.body.appendChild(d);
}

или вот пример этого фрейма http://learn.javascript.ru/play/zfFWPb
Все замечательно, но нужно чтобы при последующей перегрузке iframe созданные блоки div не исчезали с основной страницы. Так вот вопрос такой, как так сделать? Я как понимаю, нужно вставить новый блок не в body фрейма, а в body основной страницы. Если я правильно думаю, подскажите код пожалуйста, у меня никак не получается :(

Может так ?

function DopInfo(elem){
var d=parent.document.createElement('div');
d.className='dopInfoCSS'
d.style.left = "300px"
d.style.top = "100px"
parent.document.body.appendChild(d);
}

Я так пробовал, в самой по себе странице блок создается, но будучи фреймом в другой странице - не работает.

function DopInfo(elem){
var d=parent.document.createElement('div');
d.className='dopInfoCSS'
d.style.left = "300px"
d.style.top = "100px"
d.style.width = "200px"
d.style.height = "100px"
d.style.border = "red solid 1px"
d.style.padding = "12px"
d.innerHTML = "Привет фонарик"
parent.document.body.appendChild(d);
}DopInfo(1)

<div id=Mytxt  style="display:none">
//-- Котекст устанавливаемого во фрейм --//
function DopInfo(elem){
var d=parent.document.createElement('div');
d.className='dopInfoCSS'
d.style.left = "300px"
d.style.top = "100px"
d.style.width = "200px"
d.style.height = "100px"
d.style.border = "red solid 1px"
d.style.padding = "12px"
d.innerHTML = "Привет фонарик"
parent.document.body.appendChild(d);
alert('Привет из фрейма мой .innerHTML\n\n'+document.body.parentNode.innerHTML)
}DopInfo(1)
</div>
<script>

function Funk0(aa) {
var a=''
var iframe = aa
var iframeDoc = iframe.contentWindow.document;
var b = iframeDoc.createElement('div');
b.innerHTML=a;//alert(b.innerHTML)
iframeDoc.body.appendChild(b);
var s = iframeDoc.createElement('script');
s.setAttribute("type","text/javascript");
var str =document.getElementById('Mytxt').innerHTML;
s.text=str;
b.appendChild(s);
setTimeout(function() {alert('удаляем фрейм');aa.parentNode.removeChild(aa)},3000) //Удаляем фрейм
}

</script>
<iframe name=frame1 onload="Funk0(this)"></iframe>

Я наверно не осилю всё это без помощи :( Было у меня так мало буковок в скрипте, создающим дополнительный блок див.. Неужели чтобы из фрейма вставить созданный в этом фрейме блок в тело не фрейма этого, а в основную страницу, нужно так много кода? ((( Я думал вместо document.body.appendChild нужно обратиться к структуре повыше и вставить туда блок, а выходит что я совсем запутался :(

Спасибо вам что пытаетесь помочь, я очень это ценю, самое главное из вашего кода я не понял, это все скрипт для фрейма, или же для основной страницы тоже ?

Понимаете, что вам кажется таким элементарным для меня может казаться наисложнейшей задачей в понимании. Каждая лишняя строчка в коде осложняет восприятия общего механизма. Можно ли, по возможности, исключить из кода все не самое необходимое? Исходя из задачи которая есть в первом посте?

Хотя проще создать функцию для установки div в основном документе и вызвать её из фрейма

<script>
function DopInfo(elem){
var d=document.createElement('div');
d.className='dopInfoCSS'
d.style.left = "300px"
d.style.top = "100px"
d.style.width = "200px"
d.style.height = "100px"
d.style.border = "red solid 1px"
d.style.padding = "12px"
d.innerHTML = "Привет фонарик"
document.body.appendChild(d);
}


function Funk0(aa) {
var a=''
var iframe = aa
var iframeDoc = iframe.contentWindow.document;
var b = iframeDoc.createElement('div');
b.innerHTML=a;//alert(b.innerHTML)
iframeDoc.body.appendChild(b);
var s = iframeDoc.createElement('script');
s.setAttribute("type","text/javascript");
s.text='parent.DopInfo(1);';

b.appendChild(s);
setTimeout(function() {alert('удаляем фрейм');aa.parentNode.removeChild(aa)},3000) //Удаляем фрейм
}

</script>
<iframe name=frame1 onload="Funk0(this)"></iframe>

,type,

фонарик,
Букв мало = это я извращаюсь чтобы всё это продемонстрировать, что работает даже тут в топике
Во фрейме Вам достаточно
установить такое (это для первого примера)

<script>
function DopInfo(elem){
var d=parent.document.createElement('div');
d.className='dopInfoCSS'
d.style.left = "300px"
d.style.top = "100px"
d.style.width = "200px"
d.style.height = "100px"
d.style.border = "red solid 1px"
d.style.padding = "12px"
d.innerHTML = "Привет фонарик"
parent.document.body.appendChild(d);
}DopInfo(1)
</script>

Для второго Варианта
На главной ставите

<script>
function DopInfo(str){
var d=document.createElement('div');
d.className='dopInfoCSS'
d.style.left = "300px"
d.style.top = "100px"
d.style.width = "200px"
d.style.height = "100px"
d.style.border = "red solid 1px"
d.style.padding = "12px"
d.innerHTML = str
document.body.appendChild(d);
}
</script>

Во фрейме

<script>
 parent.DopInfo( "Привет фонарик");
</script>

Ураа!! Здорово Я поначалу не заметил что появляемые блоки див размещаются за пределами основной страницы в столбик снизу, а теперь увидел :) Все правильно, у меня то в body есть и другие блоки, а новым как раз место последнее :) Теперь будем дальше думать о размещении и позиционировании, но главное то решено, благодаря вам, мистер Deff, большое вам спасибо за помощь и потраченное время :thanks:

Вы так оперируете значениями, складывается впечатление что это ваш второй родной язык :D

Почему-то, после создания div блока

document.createElement('div')

ему нельзя присвоить класс из таблицы стилей CSS посредством

className='dopInfoCSS'

Создаваемый div не считывает из таблицы стилей никакие свойства, почему оно так ?

фонарик,
неустанавливайте свойство скриптом если хотите приоритета класса