27.02.2013, 18:48
|
Кандидат Javascript-наук
|
|
Регистрация: 23.02.2013
Сообщений: 127
|
|
Создать блок 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 основной страницы. Если я правильно думаю, подскажите код пожалуйста, у меня никак не получается
Последний раз редактировалось фонарик, 27.02.2013 в 18:51.
|
|
27.02.2013, 18:51
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
Может так ?
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
|
Кандидат Javascript-наук
|
|
Регистрация: 23.02.2013
Сообщений: 127
|
|
Я так пробовал, в самой по себе странице блок создается, но будучи фреймом в другой странице - не работает.
|
|
27.02.2013, 19:09
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
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>
Последний раз редактировалось Deff, 27.02.2013 в 23:21.
|
|
27.02.2013, 19:59
|
Кандидат Javascript-наук
|
|
Регистрация: 23.02.2013
Сообщений: 127
|
|
Я наверно не осилю всё это без помощи Было у меня так мало буковок в скрипте, создающим дополнительный блок див.. Неужели чтобы из фрейма вставить созданный в этом фрейме блок в тело не фрейма этого, а в основную страницу, нужно так много кода? ((( Я думал вместо document.body.appendChild нужно обратиться к структуре повыше и вставить туда блок, а выходит что я совсем запутался
Спасибо вам что пытаетесь помочь, я очень это ценю, самое главное из вашего кода я не понял, это все скрипт для фрейма, или же для основной страницы тоже ?
Понимаете, что вам кажется таким элементарным для меня может казаться наисложнейшей задачей в понимании. Каждая лишняя строчка в коде осложняет восприятия общего механизма. Можно ли, по возможности, исключить из кода все не самое необходимое? Исходя из задачи которая есть в первом посте?
|
|
27.02.2013, 20:08
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
Хотя проще создать функцию для установки 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 в 23:22.
|
|
27.02.2013, 20:10
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
фонарик,
Букв мало = это я извращаюсь чтобы всё это продемонстрировать, что работает даже тут в топике
Во фрейме Вам достаточно
установить такое (это для первого примера)
<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>
Последний раз редактировалось Deff, 27.02.2013 в 20:14.
|
|
27.02.2013, 20:48
|
Кандидат Javascript-наук
|
|
Регистрация: 23.02.2013
Сообщений: 127
|
|
Ураа!! Здорово Я поначалу не заметил что появляемые блоки див размещаются за пределами основной страницы в столбик снизу, а теперь увидел Все правильно, у меня то в body есть и другие блоки, а новым как раз место последнее Теперь будем дальше думать о размещении и позиционировании, но главное то решено, благодаря вам, мистер Deff, большое вам спасибо за помощь и потраченное время
Вы так оперируете значениями, складывается впечатление что это ваш второй родной язык
|
|
27.02.2013, 22:24
|
Кандидат Javascript-наук
|
|
Регистрация: 23.02.2013
Сообщений: 127
|
|
Почему-то, после создания div блока
document.createElement('div')
ему нельзя присвоить класс из таблицы стилей CSS посредством
className='dopInfoCSS'
Создаваемый div не считывает из таблицы стилей никакие свойства, почему оно так ?
|
|
27.02.2013, 22:30
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
фонарик,
неустанавливайте свойство скриптом если хотите приоритета класса
|
|
|
|