1

Hola estoy realizando una pagina web con PHP, pero quisiera saber como puedo embeber otra pagina HTML dentro de mi página; es decir: tengo este menú guardado en otro HTML:

 <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Para evitar colocarlo en todos mis archivos quisiera importarlo, pero no se como. ¿Alguien me puede ayudar?, si quisiera hacerle referencia en:

<html>
    
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
         <link rel="stylesheet" href="css/bootstrap.css">
         <script src="http://www.w3schools.com/lib/w3data.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <object type="text/html" data="/nav/navbar.html">
<p>backup content</p>
</object>
    </body>

</html>

Pero no carga.....

5
  • "Pero no carga". Esta última frase de hecho que no ayuda en nada. ¿Algún error visible en consola?
    – gugadev
    Commented el 1 feb. 2017 a las 13:33
  • Si quieres literalmente incluir una pagina html entera, podrías usar un <iframe />. Eso es lo que quieres conseguír? Commented el 1 feb. 2017 a las 13:48
  • 1
    Un object funciona de manera similar a iframe. De hecho, object es mejor para algunas cosas (y más moderno ya que fue incluído en HTML5), permitiendo embeber no solo código HTML si no también, flash, imágenes, etc. El error de Daniel creo se debe a rutas. En valor que se le pasa al atributo data debe ser una ruta relativa. Ten en cuenta que, /nav puede estar refiriéndose como /www/nav en lugar de /www/aplicacion/nav.
    – gugadev
    Commented el 1 feb. 2017 a las 13:51
  • Vale corrigiendo la ruta , me carga aunque sin estilos , podría ser que referencie al el estilo en el archivo que traigo? Commented el 1 feb. 2017 a las 13:53
  • Por supuesto, los estilos de preferencia deben ir en el layout que es, donde incluyes todos los templates.
    – gugadev
    Commented el 1 feb. 2017 a las 13:54

1 respuesta 1

1

Imaginando que el primer archivo se llama header.php y el segundo index.php entonces tendrías que hacer esto, usando require_once para incluir el primer archivo.

<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
     <link rel="stylesheet" href="css/bootstrap.css">
     <script src="http://www.w3schools.com/lib/w3data.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<?php require_once 'header.php'; ?>
<p>backup content</p>
</object>
</body>
</html>
3
  • así me carga el archivo , pero solo hay un problema no me trae el css Commented el 1 feb. 2017 a las 14:06
  • Vale me funciono perfecto , muchísimas gracias gente Commented el 1 feb. 2017 a las 14:07
  • de nada daniel, @StefanNolde es un problema de php, en la primera linea lo menciona
    – w33haa
    Commented el 1 feb. 2017 a las 14:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.