Форум

syegorius · #1 (**permalink**) 26.11.2011, 03:41

доброе время суток!

подскажите как правильно вставить 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)), но не получилось. что я делаю не так?

заранее спасибо за ответы!

ksa · #2 (**permalink**) 26.11.2011, 11:08

Сообщение от 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>

syegorius · #3 (**permalink**) 26.11.2011, 15:52

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

ksa · #4 (**permalink**) 26.11.2011, 15:59

syegorius, пора и тебе начать делать полные примеры...

syegorius · #5 (**permalink**) 26.11.2011, 16:36

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

ksa · #6 (**permalink**) 27.11.2011, 11:47

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

ну если полностью ф-цию то вот она

Ты видишь мой прмер? Вот это и называется "полный тестовый пример"... Ты можешь, взяв его за основу, сделать свой.

А если тебе лень - начинай копить деньги, тогда может быть найдутся желающие покопаться в твоём коде...

tenshi · #7 (**permalink**) 27.11.2011, 16:45

если уж используешь ифрейм, то лучше задать designmode вместо contenteditable

syegorius · #8 (**permalink**) 05.01.2012, 10:24

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

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

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 пусто.

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

Форум

Справочник

Discord чат

Курсы javascript