HEEELP - Problemer med \"document.body.innerHTML\"

Det lyder måske som en lidt langt ude forklaring (og jeg ved heller ikke om det er detd er er galt i dit tilfælde) men jeg havde en gang samme problem med attributten frameBorder=\"no\". Jeg forsøgte en masse forskelligt, indtil jeg fandt på at debugge (i Visual Interdev) og se HTML elementets attributter. Her fandt jeg ud af, at det hed netop frameBorder og ikke frameborder (stort \"B\") som jeg brugte når jeg scriptede. Da jeg ændrede scriptet til at indsætte frameBorder virkede det (i IE 5.5). Denne måde at stave attributten på, er ikke korrekt ifølge HTML 4.0, og derfor ikke dokumenteret i diverse bøger. Måske er noget lignende gældende i dit tilfælde?
Hvis du ikke har adgang til Interdev, eller et andet værktøj med samme daciliteter kan du prøve at alerte objektets attributter, og se hvad der kommer ud af det?!

:-) Lars

I det her tilfælde hvor du kalder en funktion behøves \"\" egentligt ikke. F.eks virker den her også.

<a href=\"#\" onclick=alert(\'hej\');>skjahds</a>

Til altinet:

Jeg tror ikke det er problemet, da .innerHTML automatisk automatisk laver alle bogstaver til lowercase!

Til nikolajdu:

Hvis jeg dobbelt-klikker på mit span-tag får jeg fejlmeddelelsen: \"Linje 0 - Fejl: Et objekt var ventet!\"

Prøv først at bytte rundt på \' og \":

<option value=\'<span minatrr=\"Stamdata/TLF\"

Du kan også evt prøve at bruge escape tegn i stedet for at kunne bruge \" i stedet for \'

altså stilen

<option value=\"<SPAN minattr=\\\"Stamdata/TLF\\\" class=\\\"XMLTag\\\" onkeydown=\\\"tagkeydown();\\\" ondblclick=\\\"tagdblclick()\\\";>Stamdata/Telefon</SPAN>
\">Stamdata/Telefon

<option value=\"&lt;span class=\'XMLTag\' xmlvalue=\'Stamdata/Navn\' ondblclick=\'tagdblclick();\' onkeydown=\'tagonkeydown();\'&gt; Stamdata/Navn\">
  Stamdata / Navn
</option>

Det er jo når jeg gemmer <span> i oEdit.document.body.innerHTML at problemet opstår og ikke før! Jeg har testet mange måder at skrive det span-tag på og det hjælper ikke. Jeg tror der må være noget med det innerHTML!

Kan du ikke poste noget mere kode så jeg kan se dit kald også. Det gør det noge nemmere at tjekke.

Har du prøvet først at skrive selve span tagget med en ID <span id=\'enUnikId\'></span>, og derefter at skrive til document.getElementById(\'enUnikId\').innerHTML; ??
Eller skrive <span id=\'enUnikId\'></span>, og derefter document.getElementById(\'enUnikId\').setAttribute(\'ondblclick\',\'tagdblclick();\'); (o.s.v. for de øvrige attributter)

:-) Lars

I kan godt få mere kode, men det kommer som mail til jer, hvis det er iorden??? Skriv lige jeres mailadresser til mig!

flasher@nikolajdu.dk

Jeg laver lige en smule kommentarer til koden!

fint.

<ole>
Der er ikke brug for mere kode, men tre små forløsende ord: \"ærg\'lig, ærg\'lig, ærg\'lig!\"  :)

Årsagen ligger i, at W3C har gjort disse gåseøjne valgfri - efter pres fra MS. Det har bevirket, at MS DHTML Editing Component (hvad enten man bruger IE\'s indbyggede eller Active-X komponenten) ikke skriver dem. Dine \'private\' attributter genkender IE ikke, så derfor udstyres de med gåseøjne.

Du vil med tiden finde ud af, at hvis du vil skrive pæn og korrekt kode, er DHTML Editing komponenten KUN en begyndelse.
Efter du har skrevet koden ind i din iframe, skal den cleanes vældigt op, inden den gemmes...fuldstændig ligesom FrontPage-kode aldrig burde slippes løs på nettet, uden at være \'håndrettet\' først.
That\'s life...when you play with MS...!  =o)

altinet >> Du sammenblander formodentlig nogle begreber:
Hvis du sætter en attribut direkte i et tag - eller via style-sheet eller inline-styles - skrives disse med småt.
Sætter du dem derimod med JavaScript skrives de oftest med stort i anden del af ordet, hvis det er sammensat...netop som med \'frameBorder\'. Det samme gælder \'borderColor\', \'backgroundColor\', \'zIndex\', o.m.a.
/mvh
</bole>

Så er den sendt til nikolajdu!

Ole du er så hård & sexy.

herchin - Vi må gå ud fra Ole har ret. Han tager sjældent fejl. Så det ser ud til at han må komme med en mulig workaround.

olebole:

1) Er du 110% sikker på, at det ikke kan lade sig gøre?

2) Jeg tror, at det i mit tilfælde handler lige så meget om, at den reference jeg har lavet til mine scripts ikke bliver fanget!

Her den funktion der indsætter referencer i oEdit:
function init() {
    //Sæt alle objecter til unselectable
  for (i=0; i<document.all.length; i++)
    document.all(i).unselectable = \"on\";

  //Initialisering af editfeltet
  //Her sættes links til JScripts og Stylesheet for oEdit

  oEdit.document.open();
  oEdit.document.writeln(\"<html>\");
  oEdit.document.writeln(\"<head>\");
  oEdit.document.writeln(\"<link rel=\'stylesheet\' type=\'text/css\' href=\'editorStyles.css\'>\");
  oEdit.document.writeln(\"<script language=\'JScript\' src=\'editorScripts.js\'></script>\");   
  oEdit.document.writeln(\"</head>\");
  oEdit.document.writeln(\"<body>\");
  oEdit.document.writeln(\"</body>\");
  oEdit.document.writeln(\"</html>\");       
  oEdit.document.close();
  oEdit.document.designMode=\"on\";
};

Lige en tilføjelse: Linjen der referer til mit stylesheet virker fint!

>> olebole
Du har sikkert ret. Jeg blev dog ret overrasket over, at en attribut sat direkte, med småt, blev udlæst med \"stort midterbogstav\", når jeg brugte debug i Interdev.

Men hvad med mit forslag om at bruge \"setAttribute\" ??

:-) Lars

Altinet: Det var et godt forslag og du får nogle point for det, når jeg lukker spørgsmålet!!!

Læs lige det sdste jeg har skrevet med mine referencer!

Jeg har fundet frem til noget!

Som I kan se skriver jeg nogle referencer i oEdit.document. De kan ses i kildekoden, når man højreklikker på oEdit!

Når jeg så på et senere skriver: \"oEdit.document.writeln(*** her indsætter vi det <span>-tag ***); så viser kildekoden kun <span>-taget og ikke det jeg tidligere har skrevet i oEdit.document!

Det må næsten være her problemet ligger!!!

(Der er point til alle, der har givet svar indtil videre og ekstra point til dem der løser det nye problem!!!)

ligger src=\'editorScripts.js\' i samme bibliotek som html filen i iframe\'en?
Prøv evt. med en absolut sti.
Måske fanges stien til scriptet ikke, hvis der ikke er et \"udgangspunkt\" i form af et eksisterende src-dokument. For jeg forstod det ret at du scripter hele indholdet i iFrame\'en?

:-) Lars/altinet

oEdit.document.body.insertAdjecentHTML(\'BeforeEnd\',\'[Det der skal indsættes]\')

:-) Lars

Jeg får fejlmeddelelsen:

\"oEdit.document.body er null eller ikke et objekt\"

Hvordan kan det være?

Ehhhhhhh.....jeg forstår ikke helt, hvad du skriver...?!?!
Hvorfor nu noget om style-sheets og dobbeltklik...er dit problem, at du ikke kan få dobbeltklik til at virke - er det at dine styles ikke virker - eller er det, at du ikke får gåseøjne om dine attributter?

Ja, jeg er ikke bare 110% sikker, men 830%...! Som nikolajdu skriver: Hårdt, men sexy  *ROTFL*
/mvh

Kan vi ikke godt få en URL at forholde os til. Det ville være meget lettere at forholde sig til. Der går let \'Lykkehjulet\' i den, uden  :)

Jeg må indrømme, at jeg er meget desperat ;o)

Når jeg kommer hjem fra arbejde, ligger lige hele lortet på nettet! Der går ca. 1 time, hvis det er ok!

Her er funktionen der indsætter teksten

function insertAtCaret(element,text) {
  //Pre: element = oEdit (<iframe>)
  //Post: text indsættes sidst i elements innerHTML

  element.document.open();
  element.document.body.insertAdjecentHTML(\'BeforeEnd\',text)
  element.document.close();
}

Fejlmeddelelsen:
\"Document er null eller ikke et object\"

Prøv:
oEdit.document.open();
  oEdit.document.writeln(\"<html>\");
  oEdit.document.writeln(\"<body>\");
  oEdit.document.writeln(\"</body>\");
  oEdit.document.writeln(\"</html>\");       
  oEdit.document.close();
  oEdit.document.body.insertAdjecentHTML(\"BeforeEnd\",\"<head><link rel=\'stylesheet\' type=\'text/css\' href=\'editorStyles.css\'><script language=\'JScript\' src=\'editorScripts.js\'></script></head>\")

  oEdit.document.designMode=\"on\";


:-) Lars

Kan du så ikke også lige svare på, hvilke af de tre problemer - jeg nævnte i min sidste kommentar - du har?
/mvh

Her kommer mit egentlige problem (det har vist ændret sig lidt, da jeg selv har prøvet at løse problemet!):

Jeg initialiserer min oEdit med følgende funktion:

function init() {
  //Sæt alle objecter til unselectable
  for (i=0; i<document.all.length; i++)
    document.all(i).unselectable = \"on\";

  //Initialisering af editfeltet
  //Her sættes links til JScripts og Stylesheet for oEdit

  oEdit.document.open();
  oEdit.document.writeln(\"<html>\");
  oEdit.document.writeln(\"<head>\");
  oEdit.document.writeln(\"<link rel=\'stylesheet\' type=\'text/css\' href=\'editorStyles.css\'>\");
  oEdit.document.writeln(\"<script language=\'JScript\' src=\'editorScripts.js\'></script>\");   
  oEdit.document.writeln(\"</head>\");
  oEdit.document.writeln(\"<body>\");
  oEdit.document.writeln(\"</body>\");
  oEdit.document.writeln(\"</html>\");       
  oEdit.document.close();
  oEdit.document.designMode=\"on\";
};

Det virker fint, hvilket ses i kildekoden til dokumentet. Når jeg på et senere indsætter mit <span>-tag i (som vist i starten med funktioner insertAtCaret), så virker mit event ondblclick=tagdblclick(); ikke! Jeg får fejlmeddelelsen: \"Objekt ventet\"

oEdit kan godt genkende min stylesheet-fil, men det lader til at den ikke kan genkende min script-fil.

Håber det gav et ok overblik!

Okay...så er der zq andre, der må finde dit problem. Det er jo ikke et quiz-program, det her...!

Det er jeg ked af!!! Jeg troede egentligt først det var problemet med de der \"\". Problemet er flyttet lidt. Det er et større projekt og derfor ikke lige til at forklare!

Jeg lukker spørgsmålet og giver point!

Var det ikke derfor, du selv talte om at hænge en URL op? Du har jo omtalt tre forskellige problemer, men vi ved ikke, hvordan - og OM - de optræder. Problemerne kan ligge alle mulige steder.

I har egentligt svaret på det spørgsmål jeg stillede, så jeg tænkte, at det var rimeligt give point for de svar! Jeg opretter et nyt spørgsmål imorgen, hvis jeg ikke får løst problemet. Der vil komme en URL med til det nye spørgsmål.

Mange tak for hjælpen indtil videre!!! Ved godt, at det var forvirrende, men det er det altså også for mig!

Rolig, nu...prøv at spørge her igen imorgen - så skal vi nok prøve at hjælpe. Far er ikke vred...Far er skuffet  *ROTFL*
Der er ingen grund til at kaste flere points efter os - det vigtigste er at få løst problemet  ;o)
/mvh

Jeg prøver at lave en applikation der simulere problemet og som er nem at overskue! Så kan I kigge på den.

http://www.cipher.dk/boisens/index.html

Applikationen består af 2 filer: \'index.html\' og \'script.js\'

Her er filen script.js:

function f1() {
  alert(\"F1\");
};

function f2() {
  alert(\"F2\");
};

OBS Prøv at indsætte noget med dropdown-menuen og klik på Mode. Her kan I ændre funktionskaldene til foreksempel ondblclick=alert(\"Hej\");

Tror i kan se hvad jeg mener nu ;o)

Der er lige lagt et stylesheet på, så I kan se, hvad jeg mente med mine stylesheets.

style.css:

.XMLTag {
color: red;
border: solid 1px;
width: 0;
}

Prøv at højreklik i din iframe og vælg \"View Source\"...Uhada...!  =8-O

I stedet for at skrive dynamisk ind i iframe\'en, skulle du prøve at skrive:
  <iframe id=\"oEdit\" height=\"300\" width=\"700\" border=\"1\" noresize src=\"bla.html\"></iframe>
...og så skrive dine JS- og CSS-referencer direkte ind i \"bla.html\".
Husk iøvrigt: Kun én \'/\' i \'</script>\'  :)
/mvh

Ok - jeg har nu indsat referencerne direkte i editor.html, som er src til min iframe! Prøv at se om det var sådan du mente det... Det virker desværre ikke. Det er altså ret frustrerende ;o(

olebole -> Jeg har fundet et godt link, der beskriver en masse om at \"Editable Web Pages in IE 5.5\"

http://msdn.microsoft.com/library/default.asp?URL=/library/en-us/dnmshtml/html/createwp.asp

Af, hvad jeg kan se, så er det ikke muligt at udføre scripts i designMode ;o( Jeg citerer dig lige fra tidligere: \"ærg\'lig, ærg\'lig, ærg\'lig!\" Hvis du finder på noget genialt, må du meget gerne lige sige til - jeg er faktsisk nødt til at få det her lavet på en eller anden måde!

Jeg har løst problemet ;o)

Hvis I lige kikker på det link jeg postede før, så vil I kunne læse, at det ikke er muligt at udføre scripts fra et document, der er i designmode! Derfor tænkte jeg på at lave et div-tag som er contentEditable. Og gæt engang: Da jeg satte mine tags ind i mit div-tags innerHTML kunne jeg bruge de funktioner, som er placeret i min index.html.

Altså mit råd er: \"Brug aldrig iframes som editorfelt, hvis I vil have mulighed for at udføre scripts i editoren\"

Rart at vide, ik\'?

PS. Jeg laver en lille applikation som viser, hvordan det skal laves! Den vil i løbet af et par dage være at finde på den site jeg tidligere har posted!

Det fungerer da fint. Prøv disse dokumenter, der er omskrevet efter dine egne:

================= index.html ====================

<html>
<head>

<script>
function init() {
    for (i = 0; i < document.all.length; i++)
            document.all(i).unselectable = \"on\";

    oEdit.unselectable = \"off\";
    oEdit.document.designMode=\"on\";

}

function setMode(HTMLMode) {
    var temp;

    if (HTMLMode) {
        temp = oEdit.document.body.innerHTML;
        oEdit.document.body.innerText = temp;
    }
    else {
        temp = oEdit.document.body.innerText;
        oEdit.document.body.innerHTML = temp;
    }
}

function insertAtCaret(text) {
    oEdit.document.body.innerHTML = text;
}
</script>
</head>

<body onLoad=\"init()\">

<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
    <tr>
        <td>
            <select name=\"tags\" onChange=\"insertAtCaret(this.options[this.selectedIndex].value)\">
                <option value=\"&lt;span class=XMLTag ondblclick=f1(); onkeydown=f2();&gt;Stamdata/ID\">Stamdata/ID
                <option value=\"&lt;span class=XMLTag ondblclick=f2(); onkeydown=f2();&gt;Stamdata/Navn\">Stamdata/Navn
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <iframe id=\"oEdit\" height=\"300\" width=\"700\" border=\"1\" noresize src=\"bla.html\"></iframe>
        </td>
    </tr>
    <tr>
        <td id=\"oMode\"><input type=\"checkbox\" id=\"oHTML\" onClick=\"setMode(oHTML.checked)\"><b>Mode</b></td>
    </tr>
</table>
<a href=\"#\" onclick=\"alert(frames.oEdit.document.body.outerHTML);\">test</a>
</body>
</html>

================= bla.html ====================

<html>
<head>
<link rel=\'stylesheet\' type=\'text/css\' href=\'style.css\'>
<script src=\'script.js\'></script>
</head>
<body>

</body>
</html>

/mvh