Menü wird nicht korrekt angezeigt, wenn es einmal von iframe aus aufgerufen wurde

Ich habe ein Problem bei der Anzeige eines iFrames auf einer Seite.Menü wird nicht korrekt angezeigt, wenn es einmal von iframe aus aufgerufen wurde

Ich habe einen oberen Rahmen, der ein Logo entlang der Oberseite zeigt (was in Ordnung ist) Ich habe ein Menü auf der linken Seite der Seite. (mit dem ich ein Problem habe) Ich habe einen Rahmen auf der rechten Seite des Menüs, die meine Seite anzeigen wird.

Meine index.htm Seite ist für alle Bilder geladen und sieht wie folgt aus:

<script language="javascript"> 
    function win_resize() 
    { 
     var _docHeight = (document.height !== undefined) ? document.height : document.body.offsetHeight; 
      document.getElementById('leftMenu').height = _docHeight - 90; 
    } 
</script> 

<body onresize="win_resize()"> 
    <!-- Header --> 
    <div id="header"> 
     <div> 
      <img src="logo.png"> 
     </div> 
    </div> 

    <!-- Left Menu --> 
    <div id="left-sidebar" > 
     <iframe id="leftMenu" src="menu.htm" STYLE="top:72px; left:0px; position:absolute;" NAME="menu" width="270px" frameborder="0"></iframe> 
    </div> 

    <!-- Main Page --> 
    <div id="content"> 
     <iframe src="users1.htm" STYLE="top:72px" NAME="AccessPage" width="100%" height="100%" frameborder="0"></iframe> 
    </div> 
</body>

Meine menu.htm Seite den folgenden Code hat:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en-GB"> 

<head> 
    <link rel="stylesheet" type="text/css" href="_styles.css" media="screen"> 
</head> 
<body> 

    <ol class="tree"> 
     <li> 
      <li class="file"><a href="file1.htm">File 1</a></li> 
      <li class="file"><a href="file2.htm">File 2</a></li> 
      <li class="file"><a href="file3.htm">File 3</a></li> 
      <li class="file"><a href="file4.htm">File 4</a></li> 
      <li class="file"><a href="file5.htm">File 5</a></li> 

     </li> 
    <li> 
      <label for="folder2">My Test 1</label> <input type="checkbox" id="folder2" /> 

      <ol> 
      <li class="file"><a href="status.htm">Settings</a></li> 
       <li> 

        <label for="subfolder2">test1</label> <input type="checkbox" id="subfolder2" /> 
        <ol> 
         <li class="file"><a href="">file1</a></li> 
         <li class="file"><a href="">file2</a></li> 
         <li class="file"><a href="">file3</a></li> 
         <li class="file"><a href="">file4</a></li> 
         <li class="file"><a href="">file5</a></li> 
         <li class="file"><a href="">file6</a></li> 
        </ol> 
       </li> 
       <li> 
        <label for="subfolder2">test2</label> <input type="checkbox" id="subfolder2" /> 
        <ol> 
         <li class="file"><a href="">file1</a></li> 
         <li class="file"><a href="">file2</a></li> 
         <li class="file"><a href="">file3</a></li> 
         <li class="file"><a href="">file4</a></li> 
         <li class="file"><a href="">file5</a></li> 
         <li class="file"><a href="">file6</a></li> 
        </ol> 
       </li> 
       <li> 
        <label for="subfolder2">test3</label> <input type="checkbox" id="subfolder2" /> 
        <ol> 
         <li class="file"><a href="">file1</a></li> 
         <li class="file"><a href="">file2</a></li> 
         <li class="file"><a href="">file3</a></li> 
         <li class="file"><a href="">file4</a></li> 
         <li class="file"><a href="">file5</a></li> 
         <li class="file"><a href="">file6</a></li> 
        </ol> 
       </li> 
    </li> 
    <li> 
      <label for="folder2">My Test 2</label> <input type="checkbox" id="folder2" /> 

      <ol> 
      <li class="file"><a href="status.htm">Settings</a></li> 
       <li> 

        <label for="subfolder2">test1</label> <input type="checkbox" id="subfolder2" /> 
        <ol> 
         <li class="file"><a href="">file1</a></li> 
         <li class="file"><a href="">file2</a></li> 
         <li class="file"><a href="">file3</a></li> 
         <li class="file"><a href="">file4</a></li> 
         <li class="file"><a href="">file5</a></li> 
         <li class="file"><a href="">file6</a></li> 
        </ol> 
       </li> 
       <li> 
        <label for="subfolder2">test2</label> <input type="checkbox" id="subfolder2" /> 
        <ol> 
         <li class="file"><a href="">file1</a></li> 
         <li class="file"><a href="">file2</a></li> 
         <li class="file"><a href="">file3</a></li> 
         <li class="file"><a href="">file4</a></li> 
         <li class="file"><a href="">file5</a></li> 
         <li class="file"><a href="">file6</a></li> 
        </ol> 
       </li> 
       <li> 
        <label for="subfolder2">test3</label> <input type="checkbox" id="subfolder2" /> 
        <ol> 
         <li class="file"><a href="">file1</a></li> 
         <li class="file"><a href="">file2</a></li> 
         <li class="file"><a href="">file3</a></li> 
         <li class="file"><a href="">file4</a></li> 
         <li class="file"><a href="">file5</a></li> 
         <li class="file"><a href="">file6</a></li> 
        </ol> 
       </li> 
    </li> 
</body> 
</html>

Meine _styles.css Datei das hat folgende:

/* Just some base styles not needed for example to function */ 
*, html { font-family: Verdana, Arial, Helvetica, sans-serif; } 

body, form, ul, li, p, h1, h2, h3, h4, h5 
{ 
    margin: 0; 
    padding: 0; 
} 
body { background-color: #606061; color: #ffffff; margin: 0; } 
img { border: none; } 
p 
{ 
    font-size: 1em; 
    margin: 0 0 1em 0; 
} 

html { font-size: 100%; /* IE hack */ } 
body { font-size: 1em; /* Sets base font size to 16px */ } 
table { font-size: 100%; /* IE hack */ } 
input, select, textarea, th, td { font-size: 1em; } 

/* CSS Tree menu styles */ 
ol.tree 
{ 
    padding: 0 0 0 30px; 
    width: 300px; 
} 
    li 
    { 
     position: relative; 
     margin-left: -15px; 
     list-style: none; 
    } 
    li.file 
    { 
     margin-left: -1px !important; 
    } 
     li.file a 
     { 
      background: url(document.png) 0 0 no-repeat; 
      color: #fff; 
      padding-left: 21px; 
      text-decoration: none; 
      display: block; 
     } 
     li.file a[href *= '.pdf'] { background: url(document.png) 0 0 no-repeat; } 
     li.file a[href *= '.html'] { background: url(document.png) 0 0 no-repeat; } 
     li.file a[href $= '.css'] { background: url(document.png) 0 0 no-repeat; } 
     li.file a[href $= '.js']  { background: url(document.png) 0 0 no-repeat; } 
    li input 
    { 
     position: absolute; 
     left: 0; 
     margin-left: 0; 
     opacity: 0; 
     z-index: 2; 
     cursor: pointer; 
     height: 1em; 
     width: 1em; 
     top: 0; 
    } 
     li input + ol 
     { 
      background: url(toggle-small-expand.png) 40px 0 no-repeat; 
      margin: -0.938em 0 0 -44px; /* 15px */ 
      height: 1em; 
     } 
     li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; } 
    li label 
    { 
     background: url(folder-horizontal.png) 15px 1px no-repeat; 
     cursor: pointer; 
     display: block; 
     padding-left: 37px; 
    } 

    li input:checked + ol 
    { 
     background: url(toggle-small.png) 40px 5px no-repeat; 
     margin: -1.25em 0 0 -44px; /* 20px */ 
     padding: 1.563em 0 0 80px; 
     height: auto; 
    } 
     li input:checked + ol > li { display: block; margin: 0 0 0.125em; /* 2px */} 
     li input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }

Die Seite scheint korrekt zu zeigen, außer dass das Menü auf der linken Seite ein Checkb zeigt Ochse, wo es nicht sollte und sollte mit den + oder - Icons releaced werden.

Wenn ich es meine menu.htm öffnen ist selbst zeigt es richtig

enter image description here

aber wenn ich meine index.htm Seite zu sehen (die das Menü in der iframe lädt) nicht die besagen Menü korrekt wie unten dargestellt:

enter image description here

aber sobald ich den folgenden Code hinzufügen, es zeigt das Menü richtig:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

jedoch zeigt es meine Dokumenthöhe mit meiner win_resize-Funktion nicht korrekt an.

Ich vermute, dass das letzte Stück Code meinen Dokumentenhöhencode daran hindert, die korrekte Höhe anzuzeigen.

Ich brauche diese Funktion, damit mein Menürahmen korrekt auf der Seite angezeigt werden kann.

Weiß jemand, wo ich falsch gelaufen bin, wie es gut von ihm selbst funktioniert, aber sobald ich es von einem iframe aufrufen wird es nicht richtig angezeigt?

Ein Ich verwende den richtigen Code in meiner Funktion, um die Höhe der Dokumente vollständig zu erhalten oder gibt es ein CSS, das ich verwenden kann, um die Höhe der Dokumente zu erhalten?

Quelle

2012-09-24 Aaron

'Linke Menü 'iframe in Ihrer' index.htm' hat keine 'height' Eigenschaft.(Kann irrelevant sein) – Souta

Sie müssen Ids nicht wieder verwenden Ich würde = checkbox2 schlechte Praxis IDs sollen einzigartig sein, das ist, was Klassen sind, und möglicherweise auch eines Ihrer Probleme – Dnaso

Hoffe, Sie sind bereit für eine lange Antwort :) Es gibt eine Reihe von Fragen, die ich habe, warum Sie Dinge angehen würden, wie Sie sind, aber wird dies als Einschränkungen für das Projekt, an dem Sie arbeiten./Husten/Warum keine jQuery oder ähnliches?/Husten/

zuerst Ihre iFrame Höhe Ausgabe: I

<script language="javascript"> 

    function win_resize() 
    { 
     var _docHeight = getDocHeight(); 
     document.getElementById('leftMenu').height = _docHeight - 90; 
    } 

    //This fixes your calculation of height issue 
    //Cross browser doc height calculator **Credit to http://james.padolsey.com** 
    function getDocHeight() { 
     var D = document; 
     return Math.max(
      Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), 
      Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), 
      Math.max(D.body.clientHeight, D.documentElement.clientHeight) 
     ); 
    } 
</script>

Ich habe auch eine onload ein getestetes Cross-Browser-Höhenerfassungsfunktion zu übernehmen wie folgt

einfach Ihren Code geändert und onresize zu rufen diese Funktion, so dass Sie in der richtigen Höhe und auch die Größe neu auf die richtige Höhe ...

<body onload="win_resize()" onresize="win_resize()">

initialisiert erhalten

Zweitens funktioniert Ihre pseudo "checked" Klasse nicht in ie8 oder unter - was ich vermute, dass Sie versuchen zu unterstützen, da ich nur Ihren sichtbaren Checkbox-Fehler in ie bekam.

um dieses Problem zu beheben ich einige grundlegende Skript hinzugefügt einen Klassennamen auf die ausgewählte Eingabe zu wechseln ...

<script type="text/javascript"> 
    function getCheckedState(e){ 
    var inputId = e.id; 
    var getCheckedState = document.getElementById(inputId).checked; 

    if (getCheckedState == true) { 
     /*if checked add class*/ 
     e.className += " " + 'checked'; 
    } else { 
     /*if not checked set class to empty string*/ 
     e.className = ""; 
    } 
} 

</script>

Sie auch die .Checked Klasse auf die entsprechenden Arten in Ihrem CSS hinzufügen müssen z.B

li input:checked + ol, li input.checked + ol

Drittens war das lästige sichtbar Kontrollkästchen Dies ist der einfache Teil, nur Opazität und dh Opazität Filter auf Ihre CSS an den Eingängen hinzuzufügen.

li input { 
cursor:pointer; 
... 
opacity: 0; 
filter:alpha(opacity=0); 
}

Schließlich - vielleicht am wichtigsten

Ich würde viel über dieses Build und wie diese nav Werke ernsthaft in Frage stellen. Es gibt sicherlich alternative Methoden, die Sie verwenden können, die native HTML-Elemente verwenden und Browser-überprüfte JS-Bibliotheken wie jQuery durchsuchen, um bessere Kompatibilität zu erhalten. Ganz zu schweigen von besseren Bauweisen über iFrames!

Noch einmal das sagte - ich nehme an, Sie sind hier einfach eingeschränkt.

Eine andere Sache, auf die ich hinweisen sollte - ist die "onclick" -Funktion, die ich benutze, um die Änderung im Eingangszustand auszulösen, ist wieder eine bewusste Wahl für zB Kompatibilität - die "onchange" -Funktionalität wird unterstützt, aber nicht aktualisiert bis zum Verlust von onblur dieses Eingangs es aus der Synchronisation (für weitere Informationen)

Ich hoffe, diese Antwort hilft Ihnen, auch wenn nur ein Teil davon bringt Sie in die richtige Richtung.

Quelle

2012-11-11 01:40:34 frazerjay

Das Beispiel ist sehr engagiert, aber es sieht aus wie es diese Linie sein kann:

li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }

(oder eine andere Modifikation der Randwerte des Eingangs)

Versuchen Sie, die Randwerte des Eingangs Modifizieren und sehen Sie, ob es die gewünschten Ergebnisse liefert. Meine Vermutung ist, dass der Iframe den Eingangswert zu weit nach links verschiebt, wenn er hinzugefügt wird.

Quelle

2012-09-24 07:29:17

Verwenden Sie eine Reset-CSS-Datei. http://meyerweb.com/eric/tools/css/reset/

Raten Sie, es wird Ihnen helfen.

Quelle

2012-11-05 09:16:24

Versuchen Sie, alle Ihre IDs einzigartig, Kontrollkästchen 2 ändern Sie zwei von ihnen und Sie könnten in Ordnung sein, weil ie ist sehr temperamentvoll. Tags für Tags sind auch HTML5, die Sie jetzt wissen sollten, dh hasst.

Quelle

2012-11-11 18:17:05 Dnaso

Menü wird nicht korrekt angezeigt, wenn es einmal von iframe aus aufgerufen wurde

Antwort

Verwandte Themen