El menú no se muestra correctamente una vez llamado desde iframe

Tengo un problema al mostrar un iframe en una página.El menú no se muestra correctamente una vez llamado desde iframe

Tengo un marco superior que muestra un logotipo en la parte superior (lo cual está bien) Tengo un menú en el lado izquierdo de la página. (con el que estoy teniendo un problema) Tengo un marco a la derecha del menú que mostrará mi página.

Mi página index.htm es cargar todos los marcos y se ve así:

<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>

Mi página menu.htm tiene el siguiente código:

<!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>

Mi archivo tiene el _styles.css siguiente:

/* 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 */ }

La página parece mostrar correctamente, excepto que el menú de la izquierda muestra una verificación el buey donde no debería y se debe volver a sombrear con los íconos + o -.

Si abro mi menu.htm por él es uno mismo se muestra correctamente

enter image description here

sin embargo, cuando veo mi página index.htm (que carga el menú en el marco flotante) que no muestra la menú correctamente como se muestra a continuación:

enter image description here

sin embargo, tan pronto como agregue el código siguiente se muestra el menú correctamente:

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

Sin embargo, no muestra la altura de mi documento correctamente utilizando mi función win_resize.

Supongo que el último fragmento de código impide que el código de altura de mi documento muestre la altura correcta.

Necesito esa función para que pueda mostrar mi marco de menú correctamente en la página.

¿Alguien sabe dónde me he equivocado, ya que funciona bien por sí mismo, pero pronto como lo llamo desde un iframe, no se muestra correctamente?

¿Utilizo el código correcto en mi función para obtener la altura completa de los documentos o hay un CSS que puedo usar para obtener la altura de los documentos?

Fuente

2012-09-24 Aaron

El 'iframe del menú izquierdo' en su 'index.htm' no tiene una propiedad' height'.(Puede ser irrelevante) – Souta

No es necesario volver a usar los ids I'd = checkbox2 Los identificadores de mala práctica deben ser únicos, para eso sirven las clases y también puede ser uno de sus problemas – Dnaso

Espero que estés listo para una respuesta larga :) Tengo un montón de preguntas sobre por qué abordarías las cosas tal como eres, pero tomarás esto como una limitación para el proyecto en el que estás trabajando./tos/¿por qué no jQuery o similar?/tos/

En primer lugar el marco flotante cuestión altura: simplemente cambiado el código para incorporar una función de detección de altura a la cruz navegador ensayó como sigue

<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>

También he añadido un proceso de carga y onresize llamar a esta función para que usted se inicializa a la altura correcta y re-tamaño a la altura correcta ...

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

En segundo lugar, su clase pseudo "comprobada" no funcionará en ie8 o por debajo de, lo que supongo que está tratando de admitir, ya que solo obtuve su error visible en la casilla de verificación, es decir.

Para remediar este problema he añadido una secuencia de comandos básicos para cambiar un nombre de clase a la entrada seleccionada ...

<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>

También tendrá que añadir la clase .checked a los estilos pertinentes en su css p.ej

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

En tercer lugar, las casillas de verificación visibles molestos Esta fue la parte fácil, sólo tiene que añadir la opacidad y el filtro de opacidad es decir, para el CSS en las entradas.

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

Finalmente - quizás lo más importante

cuestionaría seriamente mucho sobre esta acumulación y cómo esta nav obras. Seguramente hay métodos alternativos que podría usar que usan elementos html nativos y bibliotecas JS probadas en buscadores cruzados como jQuery para obtener una mejor compatibilidad. ¡Sin mencionar mejores métodos de construcción sobre iFrames!

Nuevamente dicho eso: supongo que simplemente está limitado aquí.

Otra cosa que siento que debo señalar es que la función "onclick" que uso para desencadenar el cambio en el estado de entrada es una elección deliberada para, por ejemplo, Compatibilty: la funcionalidad "onchange" es compatible pero no se actualiza hasta que la pérdida de onblur de esa entrada lo deje fuera de sincronización (para más información onchange checkbox test page)

Espero que esta respuesta lo ayude incluso si solo una parte lo lleva en la dirección correcta.

Fuente

2012-11-11 01:40:34 frazerjay

El ejemplo es muy complicado, pero parece que puede ser esta línea:

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

(u otra modificación de valores de los márgenes de la entrada)

intente modificar los valores de los márgenes de la entrada y ver si proporciona los resultados deseados. Supongo que el iframe está empujando el valor de entrada demasiado hacia la izquierda cuando se agrega.

Fuente

2012-09-24 07:29:17

Utilice un archivo de restauración css. http://meyerweb.com/eric/tools/css/reset/

Supongo que te ayudará.

Fuente

2012-11-05 09:16:24

Trate de hacer que todos sus identificadores sean únicos, la casilla de verificación 2 cambia dos de ellos y puede estar bien porque es muy temperamental. También la etiqueta para las etiquetas es HTML5, que ya debes saber, es decir, detesta.

Fuente

2012-11-11 18:17:05 Dnaso

El menú no se muestra correctamente una vez llamado desde iframe

Respuesta

Cuestiones relacionadas