PDA

View Full Version : Change source of IFRAME?

Dominick
01-07-2004, 05:00 PM
Hello and thanks so much in advance for your help.

I am creating a rich text/HTML editor for late model IE only. I have most of the particulars worked out but there's one challenge that I'm stumped on...

The editable area consists of an IFRAME. All the formatting options work OK (text color, bold, etc.) but what I'd like to do is add a "theme" to the message that is being composed - in other words, give the user the option of setting a default background color and font style that will be used throughout the entire message.

What I've done is create a "Theme" dropdown that changes the IFRAME's src value to one of three external HTML files. Each of these HTML files contains the CSS attributes that create the theme (for now it's just background color, font face & color).

This seems to do the trick, and it works quite well with one exception: If a user enters some text and then decides to change the theme, the previously-entered text is lost. Is there any way to change the IFRAME's source file without forcing a reload of the IFRAME's, thereby losing its text content? Should I re-think my overall approach?

Thanks so much in advance...

Here's a link to a demo. (http://www.geocities.com/dominickpagano/editor/test.html)

Here's the code for the file that contains the editor. The code for one of the theme files will follow:

==============================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="javascript" type="text/javascript">
var viewMode = 1;
function doToggleView()
{
if(viewMode == 1)
{
iHTML = edit.document.body.innerHTML;
edit.document.body.innerText = iHTML;

toolbar.style.display = 'none';
edit.focus();
viewMode = 2;
}

else
{
iText = edit.document.body.innerText;
edit.document.body.innerHTML = iText;

toolbar.style.display = 'inline';
edit.focus();
viewMode = 1;
}
}

var rng;

// theme
function work(a)
{
if (a.theme[0].selected)
parent.editArea.location.href = 'theme_00.html';
if (a.theme[1].selected)
parent.editArea.location.href = 'theme_01.html';
if (a.theme[2].selected)
parent.editArea.location.href = 'theme_02.html';
if (a.theme[3].selected)
parent.editArea.location.href = 'theme_03.html';
}
// theme

//Function to format text in the text box
function FormatText(command, option) {
if ((command == "forecolor")||(command == "backcolor")) {
parent.command = command;
buttonElement = document.getElementById(command);
document.getElementById("colorpalette").style.left = getOffsetLeft(buttonElement) + "px";
document.getElementById("colorpalette").style.top = (getOffsetTop(buttonElement) +
buttonElement.offsetHeight) + "px";
if (document.getElementById("colorpalette").style.visibility == "hidden")
document.getElementById("colorpalette").style.visibility="visible";
else {
document.getElementById("colorpalette").style.visibility="hidden";
}

//get current selected range
var sel = document.getElementById('edit').contentWindow.document.selection;
if (sel!=null) {
rng = sel.createRange();
}
}

else {
document.getElementById("edit").contentWindow.focus();
document.getElementById("edit").contentWindow.document.execCommand(command, false, option);
document.getElementById("edit").contentWindow.focus();
}
}

//Function to set color
function setColor(color) {

//retrieve selected range
var sel = document.getElementById('edit').contentWindow.document.selection;
if (sel!=null) {
var newRng = sel.createRange();
newRng = rng;
newRng.select();
}

document.getElementById("edit").contentWindow.document.execCommand(parent.command, false, color);
document.getElementById("edit").contentWindow.focus();
document.getElementById("colorpalette").style.visibility="hidden";
}

function getOffsetTop(elm) {
var mOffsetTop = elm.offsetTop;
var mOffsetParent = elm.offsetParent;

while(mOffsetParent){
mOffsetTop += mOffsetParent.offsetTop;
mOffsetParent = mOffsetParent.offsetParent;
}

return mOffsetTop;
}

function getOffsetLeft(elm) {
var mOffsetLeft = elm.offsetLeft;
var mOffsetParent = elm.offsetParent;

while(mOffsetParent) {
mOffsetLeft += mOffsetParent.offsetLeft;
mOffsetParent = mOffsetParent.offsetParent;
}

return mOffsetLeft;
}

function Select(selectname)
{
var cursel = document.getElementById(selectname).selectedIndex;

// First one is always a label
if (cursel != 0) {
var selected = document.getElementById(selectname).options[cursel].value;
document.getElementById('edit').contentWindow.document.execCommand(selectname, false, selected);
document.getElementById(selectname).selectedIndex = 0;
}
document.getElementById("edit").contentWindow.focus();
}

function Start() {
writeRTE();
}


function writeRTE() {
document.writeln('<table border="0" cellpadding="0" cellspacing="0">');
document.writeln('<form name="rte">');

document.writeln('<tr id="toolbar">');
document.writeln('<td>');
document.writeln('<select name="selectFont" id="fontname" onChange="Select(this.id)">');
document.writeln('<option value="Font" selected>Font Face</option>');
document.writeln('<option value="Arial, Helvetica, sans-serif">Arial</option>');
document.writeln('<option value="Courier New, Courier, mono">Courier</option>');
document.writeln('<option value="Georgia, serif">Georgia</option>');
document.writeln('<option value="Times New Roman, Times, serif">Times</option>');
document.writeln('<option value="Verdana, sans-serif">Verdana</option>');
document.writeln('</select>');

document.writeln('&nbsp;');

document.writeln('<select unselectable="on" id="fontsize" onchange="Select(this.id);">');
document.writeln('<option value="Size">Size</option>');
document.writeln('<option value="1">1</option>');
document.writeln('<option value="2">2</option>');
document.writeln('<option value="3">3</option>');
document.writeln('<option value="4">4</option>');
document.writeln('<option value="5">5</option>');
document.writeln('<option value="6">6</option>');
document.writeln('<option value="7">7</option>');
document.writeln('</select>');

document.writeln('&nbsp;');

document.writeln('<select name="theme" id="theme" onchange="work(rte)">');
document.writeln('<option value="Theme">Theme</option>');
document.writeln('<option value="1">Theme 01</option>');
document.writeln('<option value="2">Theme 02</option>');
document.writeln('<option value="3">Theme 03</option>');
document.writeln('</select>');

document.writeln('&nbsp;</td>');

// text color
document.writeln('<td align="center"><div id="forecolor">&nbsp;<a href="#" onClick="FormatText(\'forecolor\', \'\')">TEXT COLOR</a>&nbsp;</div></td>');

// bg color
document.writeln('<td align="center"><div id="backcolor">&nbsp;<a href="#" onClick="FormatText(\'backcolor\', \'\')">BGCOLOR</a>&nbsp;</div></td>');

// cut
document.writeln('<td>&nbsp;<a href="#" onClick="FormatText(\'cut\')">CUT</a>&nbsp;');

// copy
document.writeln('<a href="#" onClick="FormatText(\'copy\')">COPY</a>&nbsp;');

// paste
document.writeln('<a href="#" onClick="FormatText(\'paste\')">PASTE</a>&nbsp;');

// bold
document.writeln('<a href="#" onClick="FormatText(\'bold\', \'\')">BOLD</a>&nbsp;');

// italic
document.writeln('<a href="#" onClick="FormatText(\'italic\', \'\')">ITAL</a>&nbsp;');

// underline
document.writeln('<a href="#" onClick="FormatText(\'underline\', \'\')">UL</a>&nbsp;</td>');

document.writeln('</tr>');

document.writeln('<tr><td colspan="4" height="3"></td></td>');

document.writeln('</table>');

document.writeln('<iframe id="edit" name="editArea" style="height:220px; width:684px; padding:0;" src="theme_00.html"></iframe>');

document.writeln('<iframe id="colorpalette" src="palette.html" style="visibility:hidden; position: absolute; left: 0px; top: 0px; height:122px; width:166px;"></iframe>');

document.writeln('<iframe src="themes/index.html" name="themelist" id="themelist" style="visibility:hidden; position: absolute; left: 0px; top: 0px; height:235px; width:405px;" scrolling="no"></iframe>');

setTimeout("enableDesignMode()", 10);

document.writeln('</form>');
}

function writeDefault() {
document.writeln('<textarea id="edit" name="_msg" style="width: 678px; height: 220px;"></textarea>');
}

function enableDesignMode() {
frames.edit.document.designMode = "On";
}
</script>

<style>
a {
font-family : Verdana;
font-size : 10px;
}
</style>

</head>

<body>

<script language="javascript" type="text/javascript">
<!--
Start();
//-->
</script>

</body>
</html>

==============================================

Theme:

==============================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style>
body {
font-family : Verdana;
font-size : inherit;
color : #000000;
}
</style>

</head>

<body bgcolor="#fff8dc">

</body>
</html>

==============================================
rsci
01-07-2004, 06:49 PM
Why not just link the IFRAME to a stylesheet and change the stylesheet instead of the htm file?

If that doesn't work you could always 'grab' the innerHTML of the IFRAME, store it, then put it back when the new htm file is loaded.
Skyzyx
01-07-2004, 07:20 PM
I'd say that if you apply the right amount of class attributes to the iframe in question, you can simply use JavaScript... not to load a new page in the iframe, but to change the CSS values for the iframe that is already loaded.

Sure there are other methods that are more complicated (like the idea you had -- doable, but more complex than necessary), but I think that this would be the simplest route.

Hope this helps! :thumbsup:
Dominick
01-07-2004, 07:26 PM
Hi RSCI and Skyzyx - thanks for your responses...

I considered trying to swap classes for the IFRAME, but I could not alter the IFRAME characteristics via classes - I had to embed style attributes within the IFRAME tag.

It also occurred to me that I might be able to "store" the text that was entered in the IFRAME and put it back after the IFRAME reloaded with the new theme - but that's a little beyond my level of skill...That said, I'm up for giving it a try. Is there something available that I can refer to as a model?

Thanks again,

Dominick
rsci
01-07-2004, 10:45 PM
Unfortunately I don't have links on hand or examples. I would check on tutorials for document.all() (IE only) and innerHTML to start with. That might get you started in the right direction.
Skyzyx
01-08-2004, 02:24 AM
Never, ever, ever, ever, ever, ever, ever, ever, ever, ever use document.all(). Use document.getElementById() instead.

(I'm not upset, I just feel very strongly against unnecessary proprietary code :eek: )

The new idea that you're having is exactly what I was referring to when I said that it was far more complex than it needed to be.

Can you not use JavaScript on the primary page to access the CSS values in the iframe page? That would be infinitely easier, I'd think.
Roy Sinclair
01-08-2004, 02:44 PM
(I'm not upset, I just feel very strongly against unnecessary proprietary code )

Correct. "document.all" is only needed for people who are still using IE 4.0 or IE 4.01 as their browser. That number is pretty close to zero already.
Vladdy
01-08-2004, 02:50 PM
Originally posted by Skyzyx
Never, ever, ever, ever, ever, ever, ever, ever, ever, ever use document.all(). Use document.getElementById() instead.
<snip>


And he says I'm "rough around the edges" :rolleyes: :D :D :D :D :D