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)), но не получилось. что я делаю не так? заранее спасибо за ответы! |
Цитата:
http://jurius.name/work/javascript/j...-s-iframe.html Цитата:
<!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>
|
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
|
syegorius, пора и тебе начать делать полные примеры...
|
ну если полностью ф-цию то вот она (еще раз напомню, что моя задача - вставить 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 вообще не показан
}
|
Цитата:
А если тебе лень - начинай копить деньги, тогда может быть найдутся желающие покопаться в твоём коде... |
если уж используешь ифрейм, то лучше задать designmode вместо contenteditable
|
И снова здраствуйте! Я вернулся)
Вообщем порыскал в нете, почитал статьи. Попробовал пару методов. Решил остановиться на таком:
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 пусто. Подскажите как быть. Заранее спасибо! |
| Часовой пояс GMT +3, время: 14:46. |