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

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Создать блок div из Iframe в основную страницу (https://javascript.ru/forum/misc/35965-sozdat-blok-div-iz-iframe-v-osnovnuyu-stranicu.html)

фонарик

27.02.2013 18:48

Создать блок 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 основной страницы. Если я правильно думаю, подскажите код пожалуйста, у меня никак не получается :(

Deff	27.02.2013 18:51

Может так ?

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);
}

фонарик

27.02.2013 19:00

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

Deff	27.02.2013 19:09

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>

фонарик

27.02.2013 19:59

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

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

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

Deff	27.02.2013 20:08

Хотя проще создать функцию для установки 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,

Deff	27.02.2013 20:10

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

<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>

фонарик

27.02.2013 20:48

Ураа!! Здорово

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

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

фонарик

27.02.2013 22:24

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

document.createElement('div')

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

className='dopInfoCSS'

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

рони	27.02.2013 22:30

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

фонарик

27.02.2013 22:48

Цитата:

Сообщение от рони (Сообщение 237767)

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

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

<script>
function DopInfo(str){
var d=document.createElement('div');
d.className='dopInfoCSS'
document.getElementById('content').appendChild(d)
}
</script>

И из таблицы при этом класс не считывается, отчего так?

Дело такое, что если создавать на простом примере в простой странице - то класс считается. Но тут ситуация такая, что есть основная страница, есть в ней фрейм, который вызывает функцию из основной страницы на создание блока. Это отягощение явно как-то связано с тем, что такое присвоение класса не работает :( Притом при всем, такой класс есть в стиляк как самого фрейма, так и основной страницы.

Deff	27.02.2013 22:49

<style>
#Fonaric {
 background-color: #C1D3FB;
 top:100px;
 position:absolute;
}
.Fonaric {
 color:green;
 font-weight:700;
 height:100px;
}
</style>
<body>
<script>
function DopInfo(str){
var d=document.createElement('div');
d.id='Fonaric';
d.className='Fonaric';
d.style.left = "300px";
d.style.width = "200px";
d.style.border = "red solid 1px";
d.style.padding = "12px";
d.innerHTML = str;
document.body.appendChild(d);
}DopInfo('Привет');
</script>

фонарик

27.02.2013 23:02

Г-н Deff, я об этом как раз и писал, что на простом примере в простой странице - оно работает. Но если функция находится в основной странице и вызывается из фрейма - то класс из таблицы стилей не считывается.

Deff	27.02.2013 23:04

Цитата:

Сообщение от фонарик

Г-н Deff, я об этом как раз и писал, что на простом примере в простой странице - оно работает. Но если функция находится в основной странице и вызывается из фрейма - то класс из таблицы стилей не считывается.

Устанавливайте div по второму Варианту - вызовом функции установки с главной страницы!

Deff	27.02.2013 23:06

<style>
#Fonaric {
 background-color: #C1D3FB;
 top:100px;
 position:absolute;
}
.Fonaric {
 color:green;
 font-weight:700;
 height:100px;
}
</style>
<body>
<script>
function DopInfo(str){
var d=document.createElement('div');
d.id='Fonaric';
d.className='Fonaric';
d.style.left = "300px";
d.style.width = "200px";
d.style.border = "red solid 1px";
d.style.padding = "12px";
d.innerHTML = str;
document.body.appendChild(d);
}DopInfo('Привет');
</script>


<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");
s.text='parent.DopInfo("Привет");';

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

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

фонарик

27.02.2013 23:22

Я все сделал по вашему примеру варианта 2: Во фрейме есть див блок у которого назначено на клик

parent.DopInfo(this)

На основной странице есть такое

<script>
function DopInfo(str){
var d=document.createElement('div');
d.className='dopInfoCSS'
d.innerHTML = str;
document.body.appendChild(d)
}
</script>

И при этом стиль не считывается :cray: Блок появляется без стиля.

Deff	27.02.2013 23:23

фонарик,
Есть Инет ссылка на реальную страницу с подобным?
Ти пробуй поставить для теста
На главную:

<style>
#Fonaric {
 background-color: #C1D3FB;
 top:100px;
 position:absolute;
}
.Fonaric {
 color:green;
 font-weight:700;
 height:100px;
}
</style>
<body>
<script>
function DopInfo(str){
var d=document.createElement('div');
d.id='Fonaric';
d.className='Fonaric';
d.style.left = "300px";
d.style.width = "200px";
d.style.border = "red solid 1px";
d.style.padding = "12px";
d.innerHTML = str;
document.body.appendChild(d);
}DopInfo('Привет');
</script>

А во фрейме

<script>
parent.DopInfo("Привет");
</script>

По крайней мере - если по Id чувствует, то можно класс добавить с главной

фонарик

27.02.2013 23:26

К сожалению, нету :( Если функцию перенести на страницу фрейма, открыть фрейм как отдельную страницу и на события клика по блоку вызвать функцию из этой же страницы - то стиль применяется.

Deff	27.02.2013 23:29

фонарик,
Суть в том, что В посте 15 делается именно так , и стиль как видишь действует

Deff	27.02.2013 23:38

http://hostjs-mybb2011.narod.ru/Div_and_Frame0.htm
Точная копия поста 17

фонарик

27.02.2013 23:40

Цитата:

Сообщение от Deff (Сообщение 237788)

Ти пробуй поставить для теста

При загрузке главной появился блок со всеми параметрами. Буду методом тыка смотреть в чем дело.

Deff	27.02.2013 23:42

фонарик,
1. Проверь, - точно скопировав имя класса из скрипта - устанавливаются ли стиль для HTML вписанного div,

<div class="opInfoCSS">asdsa</div>

2. Пробуй с разных браузов
Страницы открываемые с компа с фреймами ведут себя несколько не так - особенно в FF

фонарик

27.02.2013 23:45

Нашел причину: если стиль прописать в самой основной странице - стиль считывается. Если стиль записан в отдельном CSS файле - то не считывается (ни в FireFox ни в IE ни в GChrome)

Наверное это приговор (( Тело страницы придется раздувать и ломать там ноги :( Мистер Deff, спасибо вам за помощь, будьте здоровы :)

Deff	28.02.2013 00:04

Цитата:

Сообщение от фонарик

Наверное это пригово

http://hostjs-mybb2011.narod.ru/Div_and_Frame0.htm
Подключил через файл стиля http://hostjs-mybb2011.narod.ru/css/div_style.css

Думаю у Вас ошибки в файле стиля( Нужный стиль элемента просто не считывается

фонарик

28.02.2013 00:26

Данный стиль для созданного блока вручную применяется и работает. У вас на ваших страницах и вообще в примерах - все свойства стиля создаваемого блока раскиданы по трем местам: есть стиль по id по class и самим скриптом при создании присваиваются значения. Какой в этом смысл? Если все до единого свойства прописать только в классе?

фонарик

28.02.2013 00:38

Мистер Deff, спасибо вам за ваши напутствия, решил я проблему. Вы даже не видя всего содержимого правильно определили проблему: стиль просто не считывался, а причина тому было много буковок и то, что я уже запутался под конец окончательно. Стиль к которому шло обращение был прикреплен лишь к фрейму, а к основной странице нет :( Такая оплошность получилась потому, что я видя воочию что на основной странице в меню всех используемых стилей есть стиль с этим классом, но не учел того, что он там есть т.к просто подгрузился туда во время загрузки фрейма.

Deff	28.02.2013 00:41

фонарик,

Цитата:

Сообщение от фонарик

Данный стиль для созданного блока вручную применяется и работает. У вас на ваших страницах и вообще в примерах - все свойства стиля создаваемого блока раскиданы по трем местам:

Дык раскидано спецом
1. Было утверждение что стиль не работает - если заранне установлен скриптом
2. Стиль не работает через класс
3. Приведены одновременно три варианта подключения стиля и все работают
Выложите Ваше сss для блока - я подключу и его

Часовой пояс GMT +3, время: 10:53.