rich text editing

mel · Aug 23, 2007

hi all =)

why does this works ...

<html>
<body>

<iframe id="my_frame" src="blank.html">
</iframe>

<script>

document.getElementById("my_frame").contentDocument.designMode = "On";
</script>

</body>
</html>

... and this doesn't ?

<html>
<body>

<iframe id="my_frame">
</iframe>

<script>
document.getElementById("my_frame").src =
"blank.html";

document.getElementById("my_frame").contentDocument.designMode = "On";
</script>

</body>
</html>

PS in case you are wondering, it is important for me to change
dinamically the src field of the iframe ... btw, is this possible ?

elephant · Aug 23, 2007

why does this works ...

I'm not positive why the second doesn't work, but, I think it's
because design mode needs to be run after the area loads

PS in case you are wondering, it is important for me to change
dinamically the src field of the iframe ... btw, is this possible ?

Yep, here you go

<script type='text/javascript'>
function changeSrc(newUrl) {
document.getElementById('myframe').setAttribute('src',
newUrl);
}
function designModeOn(sentIframe) {
sentIframe.contentDocument.designMode = "On";
}
</script>
<body>
<iframe id='myframe' src='deleteMe.html'
onload='designModeOn(this)'></iframe>
<button onclick='changeSrc("test.html");' />
</body>

Customize to fit your needs,

mel · Aug 24, 2007

great !! it works thanks !!!! I think I was doing almost the same, i
think the difference is that i was using iframe.src = "newlocation"
and you are using the setAttribute method =)

thanks !!!

BTW, is it possible to have an empty iframe (withou any src property)
and change its contents with innerHTML or something ?

elephant · Aug 24, 2007

BTW, is it possible to have an empty iframe (withou any src property)

and change its contents with innerHTML or something ?

I'm not sure I understand the question, is there a reason for using an
empty iframe, as opposed to an empty div or some other tag? Or a
reason not to have a src tag?

I haven't tried using this with an iframe without a src, but, with a
src attribute pointing to about:blank it works.

You can use the frames object, so say you have this iframe code ->

<iframe src='blank.html' name='template'></iframe>

you can then edit it with this javascript

newDocument = window.frames['template'].document;
newDiv = newDocument.createElement('div');
newDiv.setAttribute('id','myNewDiv');
newDocument.body.appendChild(newDiv);
newDocument.getElementById('myNewDiv').innerHTML = "blah blah blah";

Although a note, while innerHTML has very good browser support, and in
most cases is faster than creating and appending new nodes, it is not
a W3C standard. Which means, it is subject to have different
implementations in different browsers, not all browsers make the new
elements part of the DOM, and there's no guarantee that it will
continually appear in browsers. If this is something you hope to last
a while, do this

myTextNode = newDocument.createTextNode('blah blah blah');
newDiv.appendChild(myTextNode);

you can also throw new elements in there.

Not a huge deal, but, I think it's a good habit to get into.

If I've misunderstood, or something doesn't make sense, or doesn't
work, let me know.

iframe loading problem in IE	7	Aug 12, 2009
What "might" I be doing wrong with this snippet?	6	Sep 25, 2023
Is it possible an iframe can overlapp another?	3	Apr 20, 2022
Help with code	0	Jun 12, 2022
Script stops working when using variables to save time typing...	4	Oct 31, 2022
How to save JSON Data to a file using fetch() api?	2	Apr 28, 2022
Image upload not working in browser	4	Sep 9, 2022
Please Help?	0	Jul 23, 2022

rich text editing

mel

elephant

mel

elephant

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads