Question

Completely restated my question:

Problem: Losing reference to an iFrame with Mozilla firefox 3.6 and 4.0

More info:
– Works fine in internet explorer 8 64-bit and 32-bit version.

How to reproduce? In Mozilla: Open the editor accordion menu. Click the ‘editor openen’ link, in the editor fill in some random text, then click ‘bestand opslaan’. Fill in a name and click on ‘save’. The content of the editor will be downloaded in HTML format.

Close the save file dialog box by clickin outside of it or on the specified buttons. Click on the ‘bestand opslaan’ button again and try to save your content to a file. You’ll see nothing happening.

The problem isn’t there in IE8. Try opening it in there.

Firebug tells me this the second time you open the save dialog:

iFrame.document is null

Example Link: http://www.newsletter.c-tz.nl/

More info:
– switched from thickbox to colorbox to try and resolve this issue and because thickbox isn’t supported for a long time now.
– colorbox gives me the same problem so I don’t think it is this.
– tried googling for iframe reference error and like, found nothing.
– tried putting the iframe code outside of the div that is called by the colorbox script, it retains it reference but not when I put it back inside that div.

Thanks to: JohnP who offered to open a ‘hunt’ on this.

Edit:

I thought maybe the saveFile.php file was causing trouble to the parent of the iframe but after removing it from the action variable in the editor.php script it still fails with the same error after you open the dialog for a second time.

Can someone maybe write a script that iterates through iframes by name and when the rignt iframe is found reference it to a var? I want to try it but don’t know how..

Answer 1

I can’t explain why it’s work the first time for Firefox, but in Firefox the function to used for get iframe is different of IE : How to get the body's content of an iframe in Javascript?.

So, replace your JavaScript function “saveToFile” to this :

function saveToFile() {
    var saveAsFileName = document.getElementById('saveAs_filename').value;
    var currentContent = tinyMCE.editors["editor_textarea"].getContent();
    var editorFileName = document.getElementById('editor_filename');

    var iFrameTag =  document.getElementById('saveAs_Iframe');
    var iFrame;
    if ( iFrameTag.contentDocument ) 
    { // FF
        iFrame = iFrameTag.contentDocument;
    }
    else if ( iFrame.contentWindow ) 
    { // IE
        iFrame = iFrameTag.contentWindow.document;
    }

    var inframeEditorFileName = iFrame.getElementById('editor_filename');
    var inframeEditorContent = iFrame.getElementById('editor_textarea');

    editorFileName.value = saveAsFileName;
    inframeEditorFileName.value = saveAsFileName;
    inframeEditorContent.value = currentContent;

    iFrame.editor_self.submit();
}

I replace the function with Firebug and it’s works for me.

Update :
You can also used a crossbrowser solution, more simple, thanks to jQuery :

function saveToFile() {
    var saveAsFileName = document.getElementById('saveAs_filename').value;
    var currentContent = tinyMCE.editors["editor_textarea"].getContent();
    var editorFileName = document.getElementById('editor_filename');
    editorFileName.value = saveAsFileName;

    $("#saveAs_Iframe").contents().find("#editor_filename").val(saveAsFileName)
    $("#saveAs_Iframe").contents().find("#editor_textarea").val(currentContent)
    $("#saveAs_Iframe").contents().find("form[name=editor_self]").submit();
}