2009-08-09 17 views
0

Ich habe iframe mit Formularelementen wie Eingabe, wählen Sie Textarea usw. Ich muss den gesamten iframe Inhalt mit den eingegebenen Werten zu diesen Elementen erhalten. In IE 7,8 funktioniert es gut, aber in FF werde ich leer oder Standardwerte stattdessen. HierFirefox Abrufen von Inhalt von iframe mit Formularelementen Werte

ist Code-Schnipsel:

Iframe Inhalt

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>Untitled Document</title> 
    </head> 
    <body> 
    <div id="content"> 
     <input name="fn" type="text" id="fn"/> 
     <select name="states"> 
     <option val=""></option> 
     <option val="ca">CA</option> 
     <option val="co">CO</option> 
     <option val="ce">CE</option> 
     <option val="cI">CI</option> 
     </select> 
    </div> 
    </body> 
</html> 

Javascript innerhalb der übergeordneten Seite

function getContentFromIframe(iFrameName){ 
     var myIFrame = document.getElementById(iFrameName); 
     var content = myIFrame.contentWindow.document.body.innerHTML; 
    } 
    //calling function for example on button click 
    alert(getContentFromIframe('frame1')); 

I-Wert in Eingabe eingegeben und wählte etwas in ausgewählten und lief Skript oben. In IE Ich bin immer zufrieden mit eingegebenen Werte, sondern ff und andere Browser gibt nur html, wie es geladen wurde, obwohl ich Werte separat zum Beispiel mit jquery

$('#frame1').contents().find('#fn').val() 

abrufen kann ich mit diesem Problem wirklich stapeln. Bitte hilf mir. Danke.

Kann es andere Möglichkeiten geben, diesen Inhalt ohne Verwendung von innerHTML zu erhalten?

Antwort

0

Eigentlich Lösung auf Stackoverflow geschrieben wurde, aber ich vermisse das Original. Vielleicht jemand anderes diese Funktion benötigt, I-Code hier mit meinem kleinen Updates aktualisiert

Die jQuery-Plugin nur Felder ist reposting, bevor wir bekommen innerhtml

(function($) { 
    var oldHTML = $.fn.html; 

    $.fn.formhtml = function() { 
     if (arguments.length) return oldHTML.apply(this, arguments); 
     $("input,textarea,button", this).each(function() { 
      this.setAttribute('value', this.value); 
     }); 

     $("select option", this).each(function() { 
      if (this.selected) 
       this.setAttribute('selected', 'selected'); 
      else 
       this.removeAttribute('selected'); 
     }); 

     $("textarea", this).each(function() { 
      $(this).html(this.value); 
     }); 

     $(":radio,:checkbox", this).each(function() { 
      // im not really even sure you need to do this for "checked" 
      // but what the heck, better safe than sorry 
      if (this.checked) this.setAttribute('checked', 'checked'); 
      else this.removeAttribute('checked'); 
     }); 
     return oldHTML.apply(this); 
    }; 

    //optional to override real .html() if you want 
    // $.fn.html = $.fn.formhtml; 
})(jQuery); 
1

Das hat nichts damit zu tun, in einem Frame zu sein - innerHTML verhält sich auf den verschiedenen Browsern anders. Selbst der einfache Fall

<div id=mydiv><input name=in id=inval value=100></div> 

wird das gleiche Verhalten aufweisen. Ich sehe keine Alternative zum separaten Abrufen der Werte.

+0

Vielen Dank für Ihre Antwort. Ja ich stimme zu, simple innerHTML in der Seite macht das selbe leider ... –

+0

Gibt es eine andere Möglichkeit, ganzen Inhalt ohne innerHTML zu bekommen? –

0

Wenn Sie jquery verwenden, können Sie die Name/Wert-Paare aller Eingaben mithilfe der serialize() -Methode abrufen. Wickeln Sie einfach Ihre Eingabefelder in ein Formularelement und als so etwas wie dies ihnen abzurufen:

var input_vals=$("iframe").contents().find("form").serialize(); 

//output: 
//"fn=bla&states=CO" 
Verwandte Themen