Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.11.2011, 03:41
Аспирант
Отправить личное сообщение для syegorius Посмотреть профиль Найти все сообщения от syegorius
 
Регистрация: 28.08.2010
Сообщений: 91

iframe как правильно динамически встаить с помощью js
доброе время суток!

подскажите как правильно вставить iframe, НО этот iframe ничего не будет брать из внешних ресурсов, т. е. src у iframe нет.

вот собственно сам iframe, о котором я говорю:

<iframe class="iframe-class">
<html>
<head>
</head>
<body id="iframe-body-id">
<span>Hello world=)</span>
</body>
</html>
</iframe>


пытался тупо вставить с помощью jquery ($('.somediv').html(str)), но не получилось. что я делаю не так?

заранее спасибо за ответы!
Ответить с цитированием
  #2 (permalink)  
Старый 26.11.2011, 11:08
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от syegorius
что я делаю не так?
Ты забываешь что это таки ифрейм...
http://jurius.name/work/javascript/j...-s-iframe.html

Сообщение от syegorius
как правильно вставить iframe
Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function(){
	var str='<iframe class="iframe-class"></iframe>';
	$(document.body).append(str);
	str='<p>Hello world=)</p>';
	var o=$('.iframe-class').get(0);
	o.contentWindow.document.writeln(str);
});
</script>
</head>
<body>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 26.11.2011, 15:52
Аспирант
Отправить личное сообщение для syegorius Посмотреть профиль Найти все сообщения от syegorius
 
Регистрация: 28.08.2010
Сообщений: 91

cпасибо, получилось.. правда забыл спросить еще такое:

как теперь этому iframe добавить стили и изменить атрибут contentediable в body на true?

пробовал вот так, но что то не вышло:

var $iframe=$el.contentWindow.document
    var $body=$iframe.getElementsByTagName('body')//[0].setAttribute('contenteditable',true)
    $body[0].innerHTML=Item[id]
    $body[0].contentEditable=true
Ответить с цитированием
  #4 (permalink)  
Старый 26.11.2011, 15:59
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

syegorius, пора и тебе начать делать полные примеры...
Ответить с цитированием
  #5 (permalink)  
Старый 26.11.2011, 16:36
Аспирант
Отправить личное сообщение для syegorius Посмотреть профиль Найти все сообщения от syegorius
 
Регистрация: 28.08.2010
Сообщений: 91

ну если полностью ф-цию то вот она (еще раз напомню, что моя задача - вставить iframe, прописать или подключить в нем стили и сделать тег body редактируемым, т. е. установить атрибут contenteditable="true"):

function insertEditor(){
    var $el=document.createElement("iframe");
    $el.src='data:text/html;charset=utf-8,<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Rich Text Area.</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><base href="http://vsesvit/"><style>html { height: 95%; } body { padding: 7px; background-color: #fff; font...idden div,.yui-hidden p,.yui-hidden span,.yui-hidden img, .yui-hidden ul, .yui-hidden ol, .yui-hidden li, .yui-hidden table { border: 1px dotted #ccc; } .yui-hidden .yui-non { border: none; } .yui-hidden img { padding: 2px; }</style></head><body contenteditable="true;">d d d</body></html>'
    document.getElementById('story').appendChild($el);
//это первый способ которым я пытался добиться результата. ничего не получилось в фаербаге body пустой
}

function insertEditor(){
    var $el=document.createElement("iframe");
    document.getElementById('story').appendChild($el);
    var $iframe=$el.contentWindow.document
    var $body=$iframe.getElementsByTagName('body')
    $body[0].innerHTML='d d d'
    $body[0].contentEditable=true//или $body[0].setAttribute('contenteditable',true) 
//второй способ которым я пытался что-то сделать - тоже ничего не получилось, в фаербаге в body написано d d d. атрибут contenteditable вообще не показан
}
Ответить с цитированием
  #6 (permalink)  
Старый 27.11.2011, 11:47
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от syegorius
ну если полностью ф-цию то вот она
Ты видишь мой прмер? Вот это и называется "полный тестовый пример"... Ты можешь, взяв его за основу, сделать свой.

А если тебе лень - начинай копить деньги, тогда может быть найдутся желающие покопаться в твоём коде...
Ответить с цитированием
  #7 (permalink)  
Старый 27.11.2011, 16:45
Профессор
Отправить личное сообщение для tenshi Посмотреть профиль Найти все сообщения от tenshi
 
Регистрация: 20.03.2008
Сообщений: 1,183

если уж используешь ифрейм, то лучше задать designmode вместо contenteditable
__________________
.ня
Ответить с цитированием
  #8 (permalink)  
Старый 05.01.2012, 10:24
Аспирант
Отправить личное сообщение для syegorius Посмотреть профиль Найти все сообщения от syegorius
 
Регистрация: 28.08.2010
Сообщений: 91

И снова здраствуйте! Я вернулся)

Вообщем порыскал в нете, почитал статьи. Попробовал пару методов.
Решил остановиться на таком:

var eId='iframe-id',iframe=document.createElement('iframe'),yss=document.getElementsByClassName('yui-skin-sam'),src='data:text/html;charset=utf-8,'+encodeURIComponent('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Title</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style type="text/css"><!-- @import url("http://site.com/css/main.css");--></style></head><body contenteditable="false" class="editable" style="background:none"></body></html>');
    iframe.setAttribute('id',eId);
    iframe.setAttribute('name',eId);
    iframe.setAttribute('width','100%');
    iframe.setAttribute('frameborder',0);
    if(yss&&typeof yss[0]!='undefined'){
        /*#Начало - Первый выриант
        iframe.setAttribute('src','about:blank')
        yss[0].appendChild(iframe);
        
        if(iframe.contentDocument)doc=iframe.contentDocument;
        else if(iframe.contentWindow)doc=iframe.contentWindow.document;
        else if(window.frames[eId])doc=window.frames[eId].document;
        if(doc){
            doc.open();
            doc.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Title</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style type="text/css"><!-- @import url("http://site.com/css/main.css");--></style></head><body contenteditable="false" class="editable" style="background:none"></body></html>');
            doc.close();
            box=doc.getElementsByTagName('body')
            if(typeof box=='object'&&typeof box[0]=='object'){
                box=box[0]
                box.innerHTML='Hello World!'
            }
            else err()
            alert(box)
        }
        #Конец - Первый вариант*/

        /*Начало - Второй вариант*/
        iframe.setAttribute('src',src)
        yss[0].appendChild(iframe);
        
        $('iframe#'+eId).load(function(){
            if(iframe.contentDocument)doc=iframe.contentDocument;
            else if(iframe.contentWindow)doc=iframe.contentWindow.document;
            else if(window.frames[eId])doc=window.frames[eId].document;
            win=document.getElementById(eId).contentWindow.window
            box=$(this).contents().find('body').get(0)
            alert(box)
            $(box).html(Item[eId])
        })
        /*Конец - Второй вариант*/
    }


Сейчас использую Второй вариант. Но он правильно вставляет только в мозилле и опере, возможно и в ие, но я еще не проверял и при alert(box) выводит HTMLObj. В хроме же выводит undefined, хотя тег head заполнен правильно, а в body пусто.

Первый вариант во всех работает одинаково: выводит [object HTMLBodyElement], тег head заполнен правильно, а в body пусто.

Подскажите как быть. Заранее спасибо!
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Управление клипами .mov с помощью js 25mute Элементы интерфейса 1 05.03.2011 09:36
Как вытащить сведения из другой страницы с помощью js? makregistr Общие вопросы Javascript 6 28.12.2010 14:07
Скрытие iframe через js Veter Events/DOM/Window 7 03.10.2009 01:16
Как правильно послать XML в POST запросе LowCoder AJAX и COMET 10 15.07.2009 23:20
iframe, как правильно обратиться? Geddar Opera, Safari и др. 22 28.05.2009 16:47