Tengo un problema con el uso de scripts js dentro de archivos HTML. Hay 2 archivos HTML a y b . b se incluye dentro de a mediante el siguiente script.
function includeHTML() { var z, i, elmnt, file, xhttp; z = document.getElementsByTagName("*"); for (i = 0; i < z.length; i++) { elmnt = z[i]; file = elmnt.getAttribute("w3-include-html"); if (file) { xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) {elmnt.innerHTML = this.responseText;} if (this.status == 404) {elmnt.innerHTML = "Page not found.";} elmnt.removeAttribute("w3-include-html"); includeHTML(); } } xhttp.open("GET", file, true); xhttp.send(); /* Exit the function: */ return; } } }Lo tomé de w3school.com, usando para incluir HTML, y mi archivo HTML a y b se muestra a continuación:
a.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div w3-include-html="b.html"></div> <script> includeHTML(); </script> </body> </html>Y el archivo b.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h4>The gist enbed link:</h3> <script src="https://gist.github.com/meminb/8e2488a47bacc7e93e645022d3dc3af1.js"></script> </body> </html>Espero poder ver la esencia que incrusté con etiquetas de script en el archivo a.html , pero no funciona. ¿Hay algún punto que me falta para lograr esto, o alguna otra solución para poder ejecutar etiquetas de script en archivos incluidos?
Prueba esto
function includeHTML() { var z, i, elmnt, file, xhttp; z = document.getElementsByTagName("*"); for (i = 0; i < z.length; i++) { elmnt = z[i]; file = elmnt.getAttribute("w3-include-html"); if (file) { var iframe = document.createElement('iframe'); iframe.style.cssText = 'border:none;width:100%;height:100%;'; iframe.src = file; elmnt.removeAttribute("w3-include-html"); elmnt.appendChild(iframe); setTimeout((f, e) => { var body = f.contentWindow.document.body; var html = f.contentWindow.document.documentElement; var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); // console.log(e); e.style.height = height + 'px'; // console.log(height); }, 500, iframe, elmnt); return; } } }