iFrame has no properties

[Badman3k]

Okay, any help on this would be greatly appreciated.

I have the following on my page:
* and iframe with src="/index.html"
* a textbox with some source code in it

I've got a js function called refreshCode that in principal takes the source in the textbox and writes it to the DOM tree of the iframe's contents.

I then have another js function called toggleFullScreen. This function takes the 600x400 iframe and makes it the full width and height of the window. It also takes the iframe and places it as the first child of body (so that it's not restricted to any of the other divs it may be contained within).

Now both of these functions work in their own right, however when I try and use the two together I come across a bit of a problem.

The last thing I do within toggleFullScreen is call refreshCode (using a setTimeout of 2000), however the code I use to get into the iframe document doesn't work when the DOM is altered and I don't know why.

The error mesage is:
frames.Previewiframe.document has no properties

Now I know that this usually refers to the fact that the document isn't loaded, and although the iframe has infact loaded the page, I can't access it.

Does anyone have any idea?

I do hope this makes sense.

Many thanks in advance,

Richard

[Kor]

It is hard to give an advice without a link, a code, or at least the significant part of the code.

On the other hand, if you use the innerHTML nonstandard method, you must know that innerHTML does not really affect the DOM tree, as it is not a DOM method.

[Badman3k]

Hey Kor,
Thanks for getting back to me. Sorry that I've taken a while to get back to you, I've been rather busy.

The code for the toggleFullScreen is given below:

function toggleFullscreen() {
var editor = document.getElementById(EDITOR_ID);
if (editor.getAttribute('class') != 'maximised') {
// Lets go Fullscreen
// Save the current location so we can move it back later on.
tFSparentElement = editor.parentNode;
tFSnextSibling = editor.nextSibling;
// Now we'll set the style so that it expands to fill the whole screen (without the scrollbars hopefully)
var aWinDim = getWinDim();
editor.setAttribute('class', 'maximised');
sEditorStyle = editor.getAttribute('style');
editor.removeAttribute('style');
document.getElementById('Design').lastChild.setAttribute('style', 'height: ' + (aWinDim[1] - ((document.getElementById('Design').firstChild.childNodes.length * iToolBarHeight) + (18 * 2))) + 'px;');
document.getElementById('Source').lastChild.setAttribute('style', 'height: ' + (aWinDim[1] - ((document.getElementById('Source').firstChild.childNodes.length * iToolBarHeight) + (18 * 2))) + 'px;');
document.getElementById('sSource').setAttribute('style', 'height: ' + (aWinDim[1] - ((document.getElementById('Source').firstChild.childNodes.length * iToolBarHeight) + (18 * 2))) + 'px;');
document.getElementById('Preview').lastChild.setAttribute('style', 'height: ' + (aWinDim[1] - ((document.getElementById('Preview').firstChild.childNodes.length * iToolBarHeight) + (18 * 2) - 1)) + 'px;');
// Now we can move the element so that it's the first child of the body tag.
document.body.insertBefore(editor, document.body.firstChild);
} else {
// Lets go micro size!
if (tFSnextSibling != null) {
// We had a sibling originally, so we'll move it back there.
tFSparentElement.insertBefore(editor, tFSnextSibling);
} else {
// We were the last element in the parent, so we'll just append to the end.
tFSparentElement.appendChild(editor);
}
// And remove the style so it goes back to sitting nicely in place.
editor.removeAttribute('class');
editor.setAttribute('style', sEditorStyle);
document.getElementById('Design').lastChild.setAttribute('style', 'height: ' + (iHeight - ((document.getElementById('Design').firstChild.childNodes.length * iToolBarHeight) + (18 * 2))) + 'px;');
document.getElementById('Source').lastChild.setAttribute('style', 'height: ' + (iHeight - ((document.getElementById('Source').firstChild.childNodes.length * iToolBarHeight) + (18 * 2))) + 'px;');
document.getElementById('sSource').setAttribute('style', 'height: ' + (iHeight - ((document.getElementById('Source').firstChild.childNodes.length * iToolBarHeight) + (18 * 2))) + 'px;');
document.getElementById('Preview').lastChild.setAttribute('style', 'height: ' + (iHeight - ((document.getElementById('Preview').firstChild.childNodes.length * iToolBarHeight) + (18 * 2) - 1)) + 'px;');
}
setTimeout("refreshCode(true)",2000);
}


As you can I'm not using the innerHTML method, except for getting the content of the page being loaded into the iFrame.

If you have any ideas (or anyone else for that matter) as to why this is happening I'd appreciate it.

Thanks in advance,

Rich

[Kor]

at a very first sight:

object.setAttribute(style,'somestyle:somevalue');

is not a cross browser method, unfortunately. Try the DOM 0

object.style.somestyle='somevalue';

gimme a bump on Monday, as I have to time this moment to analyze the whole code...