0

Antes de que marquen mi pregunta como repetida, me gustaría decir que he revisado Stackoverflow tanto en español como en inglés y nada me ha funcionado. Tengo mi index.html y quiero cargar otro archivo html que he llamado anadir.html. El archivo anadir funciona perfectamente cuando lo abro con chrome. Pero cuando lo pongo como link utilizando

<a href="#" onclick="window.open('file:///C:\Users\Allan\Desktop\Siguiendo-tutorial\ProyectoAngular\src\anadir.html'); return false">CLICK ME</a>

solo me carga una página en blanco(también en chrome) He intentado con varias formas de href, con otros comandos de window(que en este momento no recuerdo), insertando el link en un botón, tratando de abrir el HTML con un botón y no me han funcionado, o bien me carga una pestaña en blanco, o cambia la dirección en la barra de búsqueda pero nada cambia en la página. ¿cómo lo soluciono?. Lo que quiero es abrirlo en una nueva pestaña. Este es mi anadir.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ProyectoAngular</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    html, body {
        width: 50%;
        height: 50%;
        margin: 0;
        padding: 0;
        background-color: green;

    }
    #container {
        width: inherit;
        height: inherit;
        margin: 0;
        padding: 0;
        background-color: pink;
    }

    h1 {
        margin: 0;
        padding: 0;
    } 
</style>
</head>
<body>
    <form action="/action_page.php">
        Título: <input type="text" name="Titulo"><br>
        Autor: <input type="text" name="Autor"><br>
        Edición: <input type="text" name="Edicion"><br>
        Editor: <input type="text" name="Editor"><br>
        ISBN: <input type="text" name="ISBN"><br>
        <input type="submit" value="Aceptar">
    </form>
</body>
</html>

Gracias de antemano

4
  • Te refieres a abrirlo en otra pestaña, en la misma pestaña? o a abrirlo dentro de tu index.html como si fuese un elemento interno mas? También seria bueno que colocaras el código de tu archivo anadir.html
    – Arreguin92
    Commented el 3 jun. 2019 a las 2:50
  • Si ambos archivos están en el mismo directorio (Misma carpeta) basta con que en el href solo pongas el nombre de tu otro archivo, algo así: <a href="anadir.html">CLICK ME</a>
    – Arreguin92
    Commented el 3 jun. 2019 a las 3:12
  • Necesitas un Iframe si vas a cargar otro html en tu html
    – EduBw
    Commented el 3 jun. 2019 a las 6:28
  • @Arreguin92 cuando hago eso me abre una nueva pestaña en blanco Commented el 3 jun. 2019 a las 9:08

2 respuestas 2

1

Lo que quiero es abrirlo en una nueva pestaña

Te dejo un index.html genérico con 5 opciones:

-Usando el <a> en la misma pestaña

-Usando el <a> en otra pestaña

-Usando Javascript en otra pestaña

-Usando Javascript y accediendo a una carpeta relativa del disco del usuario.

-Usando Javascript y accediendo a la carpeta con la ruta absoluta del archivo anadir.html

Las tres primeras opciones consideran que anadir.html está en el mismo sitio que index.html, las otras en su ruta. Por supuesto, todas funcionan en su ámbito local, es decir, si ejecutas tu index.html desde tu ordenador, funciona hasta la última. Pero si estás en un servidor, funcionarán todas menos la última. Esto es debido que si trabajamos desde un servidor, las cuatro primeras opciones buscan el archivo en el servidor. La quinta lo buscará localmente, que creo que es lo que quieres, y el navegador no te lo permitirá.

If you face the Not Allowed to Load Local Resource error on Chrome, it is mostly due to security reasons. What you can do is set up an HTTP server on your computer and start to serve the files locally. While doing so, files will not be fetched from the network, and Chrome will stop blocking them.

<!doctype html>
<html lang="en">
<head>
  <style>
      a {text-decoration:none}
  </style>
</head>
<body>

<a href='anadir.html'>Añadir.html en esta pestaña usando el enalce HTML</a>
<br/><br />
<a href='anadir.html' target='_blank'>Añadir.html usando el enlace HTML</a>
<br /><br />
<a onclick='anadirPestana()'>Añadir html en otra pestaña desde Javascript</a>
<br /><br />
<a onclick='anadirPestanaDisco()'>Añadir html en otra pestaña desde Javascript y desde una carpeta realativa</a>
<br /><br />
<a onclick='anadirPestanaDiscoAbsoluta()'>Añadir html en otra pestaña desde Javascript y con una ruta absoluta (de mi disco)</a>


<script>
function anadirPestana(){
window.open("anadir.html", '_blank');
}

function anadirPestanaDisco(){
window.open("./carpeta/anadir.html", '_blank');
}

function anadirPestanaDiscoAbsoluta(){
window.open("D:/PROYECTOS/prueba/pestana/anadir.html", '_blank');
}

</script>

</body>
</html>
0

<div class="col-md d-flex justify-content-center pb-5">
                        <div class="card shadow-sm card-right" style="width: 18rem;" id="cards">
                          <img src="./imagenes/uabc.jpg" class="card-img-top" alt="Universidad Autonoma de Baja California">
                          <div class="card-body">
                            <h5 class="card-title">SEDE Congreso Tijuana y SEDE Cursos UABC</h5>
                            <p class="card-text">Creacion de Pagina web para informar sobre en donde se brindaran conferencias y cursos, 
                              proyecto de la compañia Lurian Academic Events</p>
                            <a href="https://sedecongreso.netlify.app/" class="btn btn-outline-dark">Sitio Web</a>
                            <a href="" class="btn btn-outline-dark">Codigo en Github</a>
                          </div>
                        </div>
                      </div>

En el href es donde pones la dirección del documento ".html"

1
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 1 oct. 2022 a las 15:28

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.