Can't submit targeting an iframe


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 12 of 12

Thread: Can't submit targeting an iframe

  1. #1
    Join Date
    Mar 2004
    Posts
    12

    Exclamation Can't submit targeting an iframe (IE bug?)

    Hi everyone. I've got this problem (bug) only with IExplorer (with Mozilla it works perfect):

    I want to do a submit with javascript, using an iframe as target. The problem is that instead of submiting within the iframe, it opens a new window! I hate that. I've been thinking for some reasons of this to happen:

    * The Iframe is created dynamicly with the document.createElement()
    * The Iframe is inserted into the document at its first child (the <HTML>), but I've inserted also into the <BODY> and fails too as well
    * It's a IExplorer bug

    Here's the code (I hope that the forum accepts all the tags):

    <script language='Javascript'>
    &nbsp;&nbsp;&nbsp;var iframe;

    &nbsp;&nbsp;&nbsp;iframe=document.createElement("IFRAME");
    &nbsp;&nbsp;&nbsp;iframe.id="anyThing";
    &nbsp;&nbsp;&nbsp;iframe.name="anyThing";
    &nbsp;&nbsp;&nbsp;document.insertBefore(iframe,document.firstChild);


    &nbsp;&nbsp;&nbsp;// This function is called by a button
    &nbsp;&nbsp;&nbsp;function doSubmit( ){
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.myForm.target="anyThing";
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.myForm.submit( );
    &nbsp;&nbsp;&nbsp;}
    </script>

    Of course, I have validations to insert the iframe into the document for different browsers/versions, but this one is the problem I'm dealing with.

    Thanx in advance.
    Last edited by dcuadra; 08-30-2004 at 11:01 AM.

  2. #2
    Nigel McFarlane is offline Former moderator, account closed
    Join Date
    Nov 2003
    Location
    I live on the 'net
    Posts
    229
    I'm not saying this will definitely work, but
    you might want to do the submit() from a seperate scripting session. After creating the IFRAME, schedule the submit() from a setTimeout() call so that it runs after the current script finishes.

    That might let IE finish it's update of the current document.
    Nigel McFarlane, Author: "Firefox Hacks", "Rapid Application Development with Mozilla"

  3. #3
    Join Date
    Mar 2004
    Posts
    12

    Unhappy That's not really the problem

    Thank you, but that's not the problem. I create the Iframe while the document is getting opened, of course, but i don't call the submit inmediately. I submit with a button, so, just afeter fill a form, check any errors like empty fields on client side, I must call the submit(), so, it's not that.

    I don't know what's the problem, I mean, i works as expected in Mozilla (when I developed this, i wasn't thinking in Mozilla or IExplorer, but in any browser, because I'm not using something out of the DOM), but in IExplorer it doesn't.

    If I use a not hidden iframe it works ok on IExplorer, but I do need this iframe to be hidden (even when the properties like width and heigth are both zero, I'm not changing any style like the display in "none" or other), I think that IExplorer is submitting in a new window because it detects that the IFrame is hidden, so the user won't look any message like "Data saved, thank you a lot", and Microsoft it's so helpful with all the mankind that it manipulates that for us, like if that's the only thing you will ever need. ****, I hate this......

  4. #4
    Join Date
    Aug 2004
    Posts
    64
    It might be a bug with dynamically created iframes. If you need a hidden frame, you could try this:

    <iframe id="anyThing" name="anyThing" style="display: none;"></iframe>

    instead of creating the frame with javascript. This way worked fine for me.

  5. #5
    Join Date
    Mar 2004
    Posts
    12

    Unhappy I can't use a static iframe

    Thank you, actually, that hidden iframe works fine, but I can't use a static iframe, because I have to create it when I create a new object. I'm developing a Remote Scriting lib in Javascript, it must be crossbrowser (which it is), so, this is a typical file using my lib:

    <html>
    <head>
    <script src='/scripts/RemoteScript.js' languaje='Javascript'></script>
    <script languaje='Javascript'>
    &nbsp;&nbsp;var rs = new RemoteScript( );
    &nbsp;&nbsp;rs.populateCombo(......); // Any method
    </script>
    </head>
    <body>
    .
    .
    </body>
    </html>

    I must create the iframe (of course, hidden), inside the function (or javascript-class) 'RemoteScript', so the HTML looks clean and programmers just care about including my lib and that's all. I don't have problems with methods that use the 'get method' when submitting. The problem happens when I want to call a submit (both with a submit button and a javascript) with 'post method' and targeting my remote-scripting-hidden iframe. I need this so I can add a method in my lib, so you can call a remote submit without refreshing all the page.

    Please, don't tell me anything about ASP.NET does that and more and whatever, because that's exactly what I'm avoiding.

    Thank you a lot, I really, REALLY, appreciate every comment to help me, even when it's not focused on the solution. Thanx.
    Last edited by dcuadra; 08-31-2004 at 11:46 AM.

  6. #6
    Nigel McFarlane is offline Former moderator, account closed
    Join Date
    Nov 2003
    Location
    I live on the 'net
    Posts
    229
    Sounds like IE isn't registering the dynamic target name as a content renderer.

    You can do GET and POST using the XMLHttpRequest object. If you do that,
    you can add extra JavaScript functionality to an un-refreshed page by using 'eval()' on the returned content. You can also get back the response page or other content as a plain string or as a DOM DocumentFragment. That works around your whole problem.

    Another suggestion for your original problem is to use the DOM 1 setAttribute() method for creating your IFRAME element's attributes instead of the .id and .name properties.

    Or, for a wierd solution, create a permanent static hidden frame with the right name=, then create the IFRAME with the same name, then rename the static one. IE might fall for it.

    - N.
    Nigel McFarlane, Author: "Firefox Hacks", "Rapid Application Development with Mozilla"

  7. #7
    Join Date
    Mar 2004
    Posts
    12

    Ok, I'll give it a try

    Thanx, I think your theories might be right, you never know with Microsoft what's about to happen.... I don't wanna use the XMLHttpRequest, because I don't want to depend of any component (at least IE and Mozilla got it, but what about Safari, Opera, Konqueror, etc.). Maybe in one or two years, everybrowser in the world will have this really cool XML component, but I'll have to wait.

    I'll try the setAttribute( ) and the static-renamed iframe, just in case IE wanna shows off. Thank you, I let you guy know about this.

  8. #8
    Join Date
    Mar 2005
    Posts
    1
    I realise this is a very old thread, but I found a solution which might help those in a similar situation.

    Rather than create an iframe dynamically, I found you could 'fool' IE by creating a dynamic DIV and then writing the iframe into it using innerHTML. Like so:

    Code:
    // Of course you'll have to put in stuff to hide the DIV/IFRAME...
    var dynamic_div = document.createElement( 'DIV' );
    dynamic_div.innerHTML = '<iframe name="dynamic_iframe" id="dynamic_iframe"></iframe>';
    document.body.appendChild( dynamic_div );
    ...and it can then be used for form submission. Also works in Opera 7+, Safari for Mac.

  9. #9
    Join Date
    Feb 2007
    Posts
    1

    Lightbulb

    The same problem, I've encountered: submitting a form into a dynamically created IFRAME: FireFox and Opera worked perfect but IE not! :mad:
    After 1 day of debugging, I founded that , following solution works:

    Code:
    var iFrameID  = 'ID1';
    var myIFrame = document.createElement('iframe');
    
    myIFrame.setAttribute('src', 'about:blank');
    myIFrame.setAttribute('id', iFrameID);
    myIFrame.setAttribute('NAME', iFrameID);
    myIFrame.style.display = 'none';
    document.body.appendChild(myIFrame);
    if((onReadyFunction) && (typeof(onReadyFunction) == 'function'))  captureEvent('load', function(){ var iFrame = document.getElementById(iFrameID); var doc = (iFrame.contentDocument)?(iFrame.contentDocument):((iFrame.contentWindow)?(iFrame.contentWindow.document):(self.frames[iFrameID].document)); if (doc.location.href == 'about:blank') { return; } else { onReadyFunction(doc.body.innerHTML); } }, myIFrame); 
    if(self.frames[iFrameID].name != iFrameID) { /* *** IMPORTANT: This is a BUG FIX for Internet Explorer *** */ self.frames[iFrameID].name = iFrameID; }
    Meanning that AFTER the iframe is created, it should be checked that self.frames[iFrameID].name is equal with iFrameID

    No DIV, nothing else more! That's all! :D

    The problem was encountered and resolved by me during myAJAX development

  10. #10
    Join Date
    Dec 2007
    Posts
    1
    iframe.name is just an attribute on the iframe... you need to set the name of the iframe-window

    iframe.contentWindow.name = 'myIframe'

  11. #11
    Join Date
    Jan 2008
    Posts
    1

    Solution for targeting dynamic iFrames on IE

    I've come across the same problem WHEN SCRIPTING FROM CHILD TO PARENT. The solution is simple although if IE worked properly you wouldn't have to conform to this solution:

    The trick is to create a DIV with createElement and use innerHTML to create the iframe object with name and ID. Here's what I did and it worked both on Firefox and IE. The code lives in the child IFRAME and writes to the parent. If you need to do this on the parent, just remove the "parent." from the code below:

    // *** first create the div
    floatDiv = parent.document.createElement("div");

    //*** next innerHTML your iframe so that it contains the name and other attributes
    floatDiv.innerHTML = '<iframe src="" name="targetframe" id="targetframe"></iframe>';

    //** assign your new DIV object an ID if you need to modify it's attributes later
    floatDiv.id = "floatingDiv";

    //** now append your new DIV object to the body of the parent.
    parent.document.body.appendChild(floatDiv);

    Now test it with a simple HREF targeting "targetframe"

  12. #12
    Join Date
    Jun 2012
    Posts
    1

    Thumbs up

    Quote Originally Posted by zaphodzaphod View Post
    iframe.name is just an attribute on the iframe... you need to set the name of the iframe-window

    iframe.contentWindow.name = 'myIframe'

    This is really a useful suggestion !!!

    I have had a try and think prefer adding this setting to the typical iframe-creation code than making a div and set its innerHTML

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center