[JS]lezen van de innerHTML uit een iframe

[Michali]

Ik probeer voor een rich edit box de inhoud van een iframe uit te lezen. Nu lukt dat gewoon zo:

code:

<iframe id="content" name="content" width="500" height="500" 
onblur="alert(content.document.body.innerHTML);"></iframe>

maar zo niet:

code:

onblur="alert(this.document.body.innerHTML);"

of zo ook niet:

code:

onblur="alert(document.getElementById('content').document.body.innerHTML);"

Met de eerste methode lukte het in het begin gewoon goed. Nu wil ik echter de inhoud uitlezen in een aparte functie, maar als ik de naam doorgeef als parameter aan de functie en dan probeer de html uit te lezen werkt het weer niet:

code:

<iframe id="content" name="content" width="500" height="500" 
onblur="show_contents('content' /* of this.name of this */);"></iframe>

<script>
function show_contents(name)
{
    alert(name.document.body.innerHTML);
    //of: alert(document.getElementById(name).document.body.innerHTML);
}
</script>

Om een of andere reden wil dat dus allemaal niet werken. Iemand een idee hoe ik het wel kan oplossen?

Edit: Mischien iets opmerkelijks, maar behalve bij de eerste manier, waar de html van de iframe ge-alert wordt, alerten de andere methodes allemaal de inhoud van de hele pagina zelf inclusief de iframe tag en script etc.

Het gaat overigens over IE. In Mozilla heb ik nog niet getest.

[ Voor 43% gewijzigd door Michali op 16-05-2004 16:32 ]

[Verwijderd]

Dit is geen IE he, je moet je goed bewust zijn van de verschillen tussen IE en Gecko.

verschillen tussen IE en Gecko

Je moet het frame benaderen via het contentWindow;

code:

document.getElementById("iframe").contentWindow.focus()

On IE, the document is obtained like this: iframename.document. This is then used to do things like execCommand, etc. This does not work on Mozilla. You must use document.getElementById("iframename").contentWindow.document. This method works on IE as well.

[ Voor 33% gewijzigd door Verwijderd op 16-05-2004 16:35 ]

[André]

Michali schreef op 16 mei 2004 @ 16:23:
Edit: Mischien iets opmerkelijks, maar behalve bij de eerste manier, waar de html van de iframe ge-alert wordt, alerten de andere methodes allemaal de inhoud van de hele pagina zelf inclusief de iframe tag en script etc.

Dat is dus de source van de pagina waar het iframe in staat.

Wil dit niet?:

code:

alert(content.document.body.innerHTML);

[Verwijderd]

Nog een keer de quote in een nieuwe post:

On IE, the document is obtained like this: iframename.document. This is then used to do things like execCommand, etc. This does not work on Mozilla. You must use document.getElementById("iframename").contentWindow.document. This method works on IE as well.

[Verwijderd]

Mozilla vindt dat het iframe element geen onblur attribuut kent. Dat is op zich niet zo gek, want die heeft het ook niet volgens de DTD. Zelfs niet volgens 4.01 Transitional.
IE heeft daar zoals gewoonlijk maling aan.

Maar goed, het iframe window object spreek je als volgt aan:

parent.frames[name]

Met document.getElementById bevind je je in de scope van het huidige window object: dat met het document met de iframe. Die wil je dus niet hebben. Vandaar dus via parent.frames een ander frame proberen te bereiken.

[Verwijderd]

Benader het frame in IE altijd op een van deze twee manieren:

code:

// Werkt niet in Gecko
window.frames["content"].document.designMode = "On";

// Werkt in zowel Gecko als in IE
document.getElementById("content").contentWindow.document.designMode = "On";

[ Voor 21% gewijzigd door Verwijderd op 16-05-2004 16:44 ]

[Michali]

André schreef op 16 mei 2004 @ 16:34:
[...]
Dat is dus de source van de pagina waar het iframe in staat.

Wil dit niet?:

code:

alert(content.document.body.innerHTML);

Ik had in mijn start post dit als eerste optie gegeven waarbij ik vertelde dat dit het enige was dat werkte. Wel dus.

[Michali]

Verwijderd schreef op 16 mei 2004 @ 16:43:
Mozilla vindt dat het iframe element geen onblur attribuut kent. Dat is op zich niet zo gek, want die heeft het ook niet volgens de DTD. Zelfs niet volgens 4.01 Transitional.
IE heeft daar zoals gewoonlijk maling aan.

Maar goed, het iframe window object spreek je als volgt aan:

parent.frames[name]

Met document.getElementById bevind je je in de scope van het huidige window object: dat met het document met de iframe. Die wil je dus niet hebben. Vandaar dus via parent.frames een ander frame proberen te bereiken.

Ik wil onblur gebruiken om dan de gehele content van de iframe weg te schrijven naar een hidden input om zo de wijzigingen op te slaan. Mischien is er een ander event wat ik beter kan gebruiken? Iets als keyup oid leek me zo'n overkill aan keren wegschrijven. Met onblur gebeurt het eigenlijk precies wanneer het zou moeten.

[Michali]

Verwijderd schreef op 16 mei 2004 @ 16:33:
Dit is geen IE he, je moet je goed bewust zijn van de verschillen tussen IE en Gecko.

verschillen tussen IE en Gecko

Je moet het frame benaderen via het contentWindow;

code:

document.getElementById("iframe").contentWindow.focus()

[...]

Het probleem is IE zelf, niet mozilla nu.

[Verwijderd]

Laatste keer, daarna ga ik huilen.

Benader IFRAMES in IE altijd op één van deze twee manieren!

code:

// Werkt niet in Gecko
window.frames["content"].document.designMode = "On";

// Werkt in zowel Gecko als in IE
document.getElementById("content").contentWindow.document.designMode = "On";

[Michali]

Verwijderd schreef op 16 mei 2004 @ 17:20:
Laatste keer, daarna ga ik huilen.

Benader IFRAMES in IE altijd op één van deze twee manieren!

code:

// Werkt niet in Gecko
window.frames["content"].document.designMode = "On";

// Werkt in zowel Gecko als in IE
document.getElementById("content").contentWindow.document.designMode = "On";

Sorry, ik doe dit nog maar twee dagen, met die rich edit boxjes etc. dus ik moet nog even warm draaien. Maar dit werkt goed wel, thanks

[Verwijderd]

Let op: dit is een kick van een oud probleem, waar misschien wel een mooie oplossing voor is

Samenvatting oude probleem
Michali maakt een webeditor en wil dat de content naar een hidden field geschreven wordt - op een intelligente manier - zodat de content server-side aanwezig is. Hij wil onblur de content wegschrijven.

Mogelijke oplossing
Je kan een onclick event listener toevoegen aan alle submit knoppen. Bovendien moet je ook aan alle formulieren een onsubmit event listeren toevoegen. Volgens mij krijg je wel problemen wanneer je het formulier verstuurt via de submit methode. Het lijkt alsof onsubmit dan niet gevuurd wordt.
Ik ga even wat test cases maken. Ik voel een oplossing

Ik heb een oplossing voor de submit methode, al vind ik het een beetje vieze oplossing zo. Het werkt wel!!!11oneoneone

HTML:

<html>
  <head>
    <title>Testcase</title>
    <script>

    function addEvent(el, evname, func) {
      try {
        if (el.attachEvent) {
          el.attachEvent("on" + evname, func);
        } else if (el.addEventListener) {
          el.addEventListener(evname, func, false);
        }
      } catch (e) {}
    }

    function rte(name, append) {
      this.setEditorName(name);
      this.setHiddenName();

      var hidden = document.createElement("INPUT");
      hidden.type = 'hidden';
      hidden.id = hidden.name = this.getHiddenName();
      append.appendChild(hidden);

      var frame  = document.createElement("IFRAME");
      frame.style.width = frame.style.height = "400px";
      frame.id = this.getEditorName();
      append.appendChild(frame);

      this.document = this.getDocument();
      this.document.designMode = "On";

      // Bug omzeilen in Gecko
      this.document.open();
      this.document.write("");
      this.document.close();
    }

    rte.prototype = {
      // Zullen we een klein beetje OO achtig doen?
      getEditorName:function() {
        return this.name;
      },
      setEditorName:function(name) {
        this.name = name;
      },
      getHiddenName:function() {
        return this.hidden;
      },
      setHiddenName:function() {
        this.hidden = 'editor_data_' + this.getEditorName();
      },
      getWindow:function() {
        return document.getElementById(this.getEditorName()).contentWindow;
      },
      getDocument:function() {
        return this.getWindow().document;
      },
      update:function() {
        document.getElementById(this.getHiddenName()).value = this.getDocument().body.innerHTML;
      }
    };



    window.onload = function () {

      var editor = new rte("editor", document.forms.formulier);

      for (var i = 0; i < document.forms.length; i++) {
        addEvent(document.forms[i], "submit", function (e) {
          editor.update();
        });

        // even omkijken ;)
        document.forms[i]._submit = document.forms.formulier.submit;
        document.forms[i].submit = function (e) {
          editor.update();
          this._submit();
        };
      }

    }

    </script>
  </head>
  <body>
    <form method="post" name="formulier">
      <input type="submit" name="button" value="Submit normal">
      <input type="submit" value="Submit by submit method" onclick="document.forms.formulier.submit(); return false;"><br>
    </form>
  </body>
</html>

[ Voor 79% gewijzigd door Verwijderd op 28-03-2005 22:14 ]