Toon posts:

[JS] focus op iframe

Pagina: 1
Acties:

Verwijderd

Topicstarter
Hey mensen,

Ik wil graag de focus op een iframe zetten in FF. Ik heb de volgende code:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function Editor(EditorID)
{
    this.EditorId = EditorID;
    this.TheEditor = this.getIFrameDocument();
    this.TheEditor.designMode = "On"; 
}

    Editor.prototype.getIFrameDocument = function()
    {
        if(document.getElementById(this.EditorId).contentDocument)
            return document.getElementById(this.EditorId).contentDocument;
        else
            return document.frames[this.EditorId].document;
    }
    
    Editor.prototype.ToggleBold = function()
    {
        this.TheEditor.execCommand("Bold", false, null);
        this.TheEditor.focus();
    }
Op de onload van de body doe ik editor = new Editor("iframe");
Dan op de knop van Bold doe ik editor.ToggleBold();

Hij geeft nu wel focus in IE maar niet in FF. In de onderstaande documentatie staat:
IE allows the focus() method to be used directly on an iframe. Technically, the focus method should be executed against the contentWindow. The following code fragment can be used to replace iframe.focus() and will work with IE and Mozilla.

document.getElementById("iframe").contentWindow.focus()
Dus zou mijn code goed moeten gaan. Het Bold doen opzich, gaat goed.

Wat doe ik fout?

Verwijderd

Je zet de focus op het contentDocument, niet op het contentWindow. Ik vermoed dat onderstaande code wel werkt.

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function Editor(editor) {
  this.editor   = editor;
  this.window   = this.getWindow();
  this.document = this.getDocument();

  this.document.designMode = 'On';
}

Editor.prototype.getWindow = function () {
  return document.getElementById(this.editor).contentWindow;
}

Editor.prototype.getDocument = function () {
  return this.window.document;
}

Editor.prototype.toggleBold = function () {
  this.document.execCommand('bold', false, null);
  this.window.focus();
}

Verwijderd

Topicstarter
Ah er staat in de quote ook Window ipv Document.. man dat ik daar overheen las 8)7
Thanks! :)

Verwijderd

Ik wou ook nog even zeggen dat het misschien geen slecht idee is om alles op te splitsen in zoveel mogelijk kleine methodes zoals ik in mijn voorbeeld doe. Ikzelf vind het stukken prettiger lezen. Daar komt ook bij dat contentWindow een property is die het gewoon doet in Internet Explorer. Het is niet nodig om voor IE gebruik te maken van de frames array.

code:
1
2
editor.contentWindow.document // variant 1
editor.contentDocument // variant 2

Ik persoonlijk vind de eerste variant logischer. contentWindow is namelijk bedoelt om een referentie te maken naar het andere document. Daarbinnen wil je het document object aanspreken. Waarom er dus uberhaupt een contentDocument property bestaat is mij een beetje een raadsel.

Verwijderd

Topicstarter
Ik wil dit topic toch nog even omhoog schoppen.

Ik ben bezig om een eventListener toe te voegen om andere events af te vangen dan alleen focus en blur. Ik heb gigantisch veel gelezen hier. Mozilla zou nog een adempauze nodig moeten hebben om het commando addEventListener toe te kennen, onpaste zou pas werken als je dit aan de body van je te editen body hangt, enz.

Ik heb een voorbeeld van GoT afgehaald die werkt met die pauze alleen nu probeer ik dit te implementeren in mijn code en dat wil dan niet..

Ik heb dit geprobeerd: (iets gemodificeerd aan bovenstaande code)
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Editor()
{
    this.EditorId = "RTEditor";
    this.Window = this.getWindow();
    this.Document = this.getDocument();
    this.Document.designMode = "On";
    
    setTimeout("this.Document.CancelPaste", 1000);
}

    Editor.prototype.CancelPaste = function()
    {
        alert('paste');
    }

Dit geeft geen foutmelding in FF, wel in IE.
Toen dacht ik, ik probeer het ubersimpel:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Editor()
{
    this.EditorId = "RTEditor";
    this.Window = this.getWindow();
    this.Document = this.getDocument();
    this.Document.designMode = "On";
    
    setTimeout("Dummy", 1000);
}

function Dummy()
{
    alert("dummy");
}

Werkt allemaal niet, wat wel werkt is: setTimeout("alert('aap')", 1000); 8)7
Wat ik gewoon wil is:
code:
1
this.Document.addEventListener("mouseup", Foo, true);

Kan iemand mij hierbij helpen?

Verwijderd

Topicstarter
kick :X

Verwijderd

/me kickt AMDinc

Het grote wysiwyg topic kan je toch niet missen...

Het komt er gewoon op neer dat je een lege string naar je document moet schrijven nadat je je document op designMode='on' hebt gezet;

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
      ...
      setEvents:function() {
        var d = this.getDocument();
        d.designMode = "On";

        ///*
        d.open();
        d.write("");
        d.close();
        //*/
        addEvent(d, "keyup", function (e) {
          alert("Woei");
        });
      } 
      ...

Oftewel deze reply van mij.

[ Voor 75% gewijzigd door Verwijderd op 22-06-2005 00:09 ]

Pagina: 1