Cargador de archivos HTML

279 Awquis

Abrir en el editor Publica tu código

Recomendado

25 February 2026

Generador de códigos QR HTML, JavaScript

16 January 2026

Plantilla HTML para reproductor de juegos Flash Ruffle

11 December 2024

Tarjeta responsiva

HTML

<!DOCTYPE html>

<head>

"width=device-width, initial-scale=1.0">

<title>HTML File Loader</title>

"Import an HTML file and it will launch the file in a new tab.">

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f4;

}

header {

background-color: #007BFF;

color: white;

padding: 20px;

text-align: center;

}

#container {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

}

input[type="file"] {

margin: 20px;

padding: 10px;

font-size: 16px;

border-radius: 5px;

border: 1px solid #ddd;

}

button {

padding: 10px 20px;

font-size: 16px;

background-color: #28a745;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

transition: background-color 0.3s ease;

}

button:hover {

background-color: #218838;

}

.message {

margin-top: 20px;

font-size: 14px;

color: #888;

}

</style>

</head>

<body>

<h1>HTML File Loader</h1>

</header>

<input type="file" id="fileInput" accept=".html"> <button id=

"launchBtn" onclick="launch();">Launch</button>

</div>

var url = '';  // Global variable to hold the file URL

document.getElementById("fileInput").addEventListener("change", function(event) {

var file = event.target.files[0];

if (file) {

var reader = new FileReader();

reader.onload = function(e) {

// Create a Blob from the file content

var blob = new Blob([e.target.result], { type: "text/html" });

url = URL.createObjectURL(blob);  // Set the global url variable

document.getElementById("message").textContent = "File loaded successfully!";

};

// Read the file as text

reader.readAsText(file);

}

});

function launch() {

if (url) {

var win = window.open();

win.document.body.style.margin = "0px";

var iframe = win.document.createElement("iframe");

iframe.style.width = "100%";

iframe.style.height = "100%";

iframe.style.border = "none";

iframe.src = url;

win.document.body.appendChild(iframe);

} else {

document.getElementById("message").textContent = "Please select a file first.";

}

</script>

</body>

</html>

CSS